/* ==========================================================================
   VU Window Treatments: Design tokens

   v2 (October 2026): a modern build that keeps VU's brand recognizable. Their
   type (Roboto Bold headings, an Avenir-style text face), their red and slate,
   and the live site's layered swoosh curve, set in a cleaner, current layout.

   Single source of truth. No other stylesheet should introduce a raw colour,
   font size, or spacing value.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

/* The live site's own type: Roboto Bold for headings and navigation, Avenir
   for text. Avenir is a licensed Linotype face, so text is set in Nunito Sans,
   its closest open match. Both are self-hosted. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-var-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito-sans-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {

  --ff-head: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --ff-text: 'Nunito Sans', 'Avenir Next', Avenir, 'Helvetica Neue', Arial, sans-serif;
  --ff-alt: var(--ff-text);

  /* ------------------------------------------------------------- colour */

  /* Grounds: light and clean, faintly warm so it never reads clinical */
  --white: #FFFFFF;
  --paper: #FAFAFA;          /* default page ground */
  --grey-50: #F4F5F6;        /* alternating section */
  --grey-100: #ECEEF0;       /* raised surface */
  --line: #E2E5E8;           /* hairline border */
  --line-strong: #CFD4D9;

  /* Ink */
  --ink: #2E3135;            /* headings: a deeper take on the live site's grey, 13:1 */
  --ink-2: #555555;          /* body text: 7.5:1 */
  --ink-3: #6B6B6B;          /* secondary: 5.3:1 */
  --ink-4: #8B9199;          /* tertiary, LARGE text only: 3.18:1 */
  --ink-label: #6E757F;      /* small uppercase labels: 4.65:1, passes AA */

  /* Brand crimson, taken from the logo. Primary action colour. */
  --red: #D81E27;
  --red-hover: #B8141C;
  --red-bright: #EC1C24;     /* logo gradient light stop; the live site's heading red */
  --red-dark: #B51F25;       /* logo gradient dark stop */
  --red-tint: #FDECED;       /* wash behind red callouts */
  --red-text: #B8141C;       /* red used as text on white: 5.9:1 */

  /* Charcoal, from the logo's U. Used for dark sections and secondary fills. */
  --charcoal: #26292D;
  --charcoal-2: #32363B;
  --charcoal-line: #40454B;

  /* Slate blue-grey, sampled from the layered swoosh curves on the live site.
     Used for washes, frames and the curve layers, never for text on white. */
  --slate: #8E9DAD;
  --slate-2: #B9C4CF;
  --slate-3: #DCE3EA;
  --slate-wash: #EEF2F5;
  --slate-ink: #4F5D6C;        /* slate as text: 6.6:1 on white */
  --slate-band: #56687A;       /* title band on the live site's cards: 5.9:1 with white */

  /* Gold, from the checkmarks already on the live site. Accent only. */
  --gold: #E2A32C;
  --gold-deep: #B47F16;

  /* semantic aliases */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-3);
  --rule: var(--line);
  --accent: var(--red);

  /* ------------------------------------------------------------ type scale */

  /* fluid between 380px and 1600px viewport */
  --fs-display: clamp(2.25rem, 1.15rem + 4.6vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.19rem + 1.83vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.04rem + 0.62vw, 1.5rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.26vw, 1.1875rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --fs-sm: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  --fs-xs: 0.8125rem;
  --fs-label: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);

  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.7;
  --lh-snug: 1.5;

  /* Bold grotesque headings need negative tracking to stay tight and modern */
  --ls-display: -0.01em;
  --ls-head: -0.005em;
  --ls-h3: 0;
  --ls-label: 0.13em;
  --ls-wide: 0.04em;

  --wt-body: 400;
  --wt-med: 500;
  --wt-semi: 600;
  --wt-bold: 700;
  --wt-black: 800;

  /* ---------------------------------------------------------- spacing */

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 176px;

  --section-y: clamp(56px, 7.5vw, 120px);
  --section-y-sm: clamp(40px, 5vw, 76px);
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1400px;
  --max-narrow: 820px;
  --measure: 70ch;
  --grid-gap: clamp(16px, 2.2vw, 32px);

  /* ------------------------------------------------------------- shape */

  /* Soft, consistent rounding: modern and friendly, matching the rounded
     buttons and cards already used on the live site. */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --hair: 1px;
  --rule-thick: 3px;

  /* ------------------------------------------------------------ motion */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t: 220ms;
  --t-slow: 300ms;

  /* ------------------------------------------------------------ effects */

  --sh-sm: 0 1px 2px rgb(31 33 36 / .06), 0 2px 6px rgb(31 33 36 / .05);
  --sh: 0 2px 6px rgb(31 33 36 / .06), 0 10px 24px -6px rgb(31 33 36 / .10);
  --sh-lg: 0 4px 12px rgb(31 33 36 / .07), 0 20px 48px -12px rgb(31 33 36 / .16);
  --sh-red: 0 6px 18px -6px rgb(216 30 39 / .45);

  /* The diagonal band from the live site, cleaned up. Used as a section
     divider and as a subtle overlay on photography. */
  --louver: repeating-linear-gradient(
    -16deg,
    rgb(31 33 36 / .10) 0px,
    rgb(31 33 36 / .10) 6px,
    transparent 6px,
    transparent 22px
  );
  --louver-light: repeating-linear-gradient(
    -16deg,
    rgb(255 255 255 / .10) 0px,
    rgb(255 255 255 / .10) 6px,
    transparent 6px,
    transparent 22px
  );

  --header-h: 72px;
  --z-header: 100;
  --z-panel: 90;
  --z-drawer: 120;
}

@media (min-width: 900px) {
  :root { --header-h: 92px; }
}