/* ============================================================
   Webify Component Library — Design Tokens
   ------------------------------------------------------------
   CLIENT-OVERRIDABLE LAYER.
   The generator injects an inline `:root{}` block (from
   site.config.json → theme) AFTER this file to override the
   --brand-* and --font-* values. Everything else is derived
   from those, so a new site changes ~6 values, not the system.
   ============================================================ */

/* ---- Self-hosted fonts (audit P14) ----
   Built by site-build/fonts.py from the official variable fonts
   (github.com/google/fonts, SIL OFL 1.1; licences beside the files in
   assets/fonts/). Subset to the characters the built site uses plus
   each script's base ranges; unicode-range below is the subset's exact
   cmap, so a face is only fetched for text it can draw. Weight ranges
   match what Google Fonts served before. Names are versioned because
   /assets/fonts/* is cached immutable: a changed font gets a new -vN
   and build.py's preload must follow. */
@font-face {
  font-family: 'Outfit';
  src: url("../assets/fonts/outfit-var-v1.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+016B, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2713;
}
@font-face {
  font-family: 'Inter';
  src: url("../assets/fonts/inter-var-v1.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+016B, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+20AC, U+2122, U+2190-2193, U+2212, U+2713;
}
@font-face {
  font-family: 'Cairo';
  src: url("../assets/fonts/cairo-var-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+060C-060D, U+0615, U+061B, U+061F, U+0621-063A, U+0640-0656, U+0658, U+0660-0671, U+0679, U+067E, U+0686, U+0688, U+0691, U+0698, U+06A1, U+06A4, U+06A9, U+06AF, U+06BA, U+06BE, U+06C1-06C3, U+06CC, U+06D2-06D4, U+06F0-06F9, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}

:root {
  /* ---- Brand (overridden per client from config.theme) ---- */
  --brand-primary:        #1b3a4b;   /* deep slate — headers, primary buttons */
  --brand-primary-light:  #2c5a72;
  --brand-primary-dark:   #12262f;
  --brand-accent:         #c08b4c;   /* warm bronze — CTAs, highlights */
  --brand-accent-light:   #d6a468;
  --brand-accent-dark:    #9c6d34;
  --brand-on-primary:     #ffffff;   /* text on primary surfaces */
  --brand-on-accent:      #17110a;   /* text on accent surfaces */

  /* ---- Neutrals (stable across clients) ---- */
  --color-white:   #ffffff;
  --color-gray-50:  #f7f8f9;
  --color-gray-100: #eef1f3;
  --color-gray-200: #e2e6ea;
  --color-gray-300: #cbd2d9;
  --color-gray-400: #9aa5b1;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ---- Semantic surfaces / text ---- */
  --surface:          var(--color-white);
  --surface-muted:    var(--color-gray-50);
  --surface-inverse:  var(--brand-primary-dark);
  --text-strong:      var(--color-gray-900);
  --text-body:        var(--color-gray-700);
  --text-muted:       var(--color-gray-500);
  --border:           var(--color-gray-200);
  --success:          #15803d;
  --danger:           #b91c1c;

  /* ---- Grounds: the ONE ladder of section background values ----
     Every band on every page is one of these four. They are the single
     source of truth: prototype-*.css alias these names, they do not
     re-declare recipes.

     All tints mix into --color-gray-50, NOT into white. The neutral
     scale is a cool blue-grey at h210; mixing the brand into pure
     white produced a lavender at h240 that fought every border, input
     and card on the page. Mixing into the neutral keeps one hue family
     (h231) and still re-themes with --brand-primary.

     Values at the shipped theme (--brand-primary #0300A9):
       ground        #ffffff  l100
       ground-tint   #f0f1f7  h231 l95   <- the only light tint
       ground-deep   #e7e9f2  h231 l92   <- artwork wells, never a band
       ground-dark   #02006b  h241 l21
     ------------------------------------------------------------ */
  --ground:        var(--surface);
  --ground-tint:   color-mix(in srgb, var(--brand-primary) 3%, var(--color-gray-50));
  --ground-deep:   color-mix(in srgb, var(--brand-primary) 7%, var(--color-gray-50));
  --ground-dark:   var(--surface-inverse);
  --ground-rule:   var(--border);

  /* A brand-tinted chip: step numerals, tag pills, icon tiles. Was
     mixed four separate times at 8% and 10% into pure white, which put
     these small marks in a different hue family (h240) from the grounds
     they sit on. One value, mixed into the neutral like everything else. */
  --brand-wash:    color-mix(in srgb, var(--brand-primary) 9%, var(--color-gray-50));

  /* --text-muted (gray-500) is AA on pure white ONLY — it measures 4.29
     on --ground-tint. Any muted text on a tinted or fading ground steps
     up one level. */
  --muted-on-tint: var(--color-gray-600);

  /* ---- Link hover: one colour per ground, not per page ---- */
  --link-hover:         var(--brand-accent-dark);
  --link-hover-on-tint: var(--brand-accent-dark);
  --link-hover-on-dark: var(--brand-accent-light);

  /* ---- Vertical rhythm: two rungs, nothing else ----
     A normal band and a feature band. Any section that wants more air
     than --section-pad takes --section-pad-lg; it does not invent a
     third clamp. */
  --section-pad:    clamp(2.5rem, 5vw, 4rem);      /* 40 -> 64px a side */
  --section-pad-lg: clamp(3.5rem, 7vw, 5.5rem);    /* 56 -> 88px a side */
  /* Hero top padding is deliberately tighter than a section's: the
     sticky header already supplies the separation, and the library
     default left a visible dead band under it. Three files repeated
     this clamp verbatim. */
  --hero-pad-top:   clamp(2.25rem, 4.5vw, 3.5rem);

  /* ---- Typography (font families overridden per client) ---- */
  --font-heading: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter',  'Segoe UI', system-ui, sans-serif;
  --font-arabic:  'Cairo',  'Segoe UI', system-ui, sans-serif;

  /* Fluid type scale */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --fs-2xl:  clamp(1.7rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-3xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
  /* Retuned 4rem -> 3.9rem. 52 -> 64 was a ratio of 1.23 where every
     other display step is 1.20; 62.4 is the on-scale value AND is
     already what trade-presence, lead-engine, digital-operations and
     work/ each override this token to. The token was the outlier, not
     the pages. */
  --fs-4xl:  clamp(2.4rem, 1.7rem + 2.9vw, 3.9rem);

  /* ---- The two missing display rungs ----
     The display range is a 1.2 modular scale with two rungs absent from
     this file. Two authors, in two files, independently landed within
     1% of exactly those rungs -- .ctform__title at 30.4 and
     .wkentry__name at 43.2 -- because that is where the ratio wanted a
     step. These are not midpoints; they are what the site already ships.

       xl 25.6 | 2xl-sm 30 | 2xl 36 | 3xl-sm 43.2 | 3xl 52 | 4xl 62.4
                     1.17     1.200      1.200      1.204    1.200

     3xl-sm's floor is 1.9rem rather than .wkentry__name's 1.75rem: at
     1.75rem it resolves to 28.2px at 390 against a 27.9px section
     title, so the step closed on mobile. */
  --fs-2xl-sm: clamp(1.45rem, 1.2rem + 1.05vw, 1.875rem);
  --fs-3xl-sm: clamp(1.9rem, 1.5rem + 1.75vw, 2.7rem);
  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.7;
  --tracking-tight: -0.02em;

  /* ---- Heading ROLES ----
     Sizes alone do not hold a system: every page invented its own H1
     and H2 class because there was no name for the role. Bind the role,
     not the pixel value. Six H1 sizes and eight H2 sizes collapse to
     one and three.

       page     the page headline, one per page
       feature  a section that IS a content unit rather than a band
                between units -- a work entry, the demo storefront
       section  a section title: the workhorse
       sub      a subordinate block title inside a section
  */
  --h-page:    var(--fs-4xl);
  --h-feature: var(--fs-3xl-sm);
  --h-section: var(--fs-2xl);
  --h-sub:     var(--fs-2xl-sm);

  /* Tracking and leading for the page role. Now that every H1 is one
     size, three different values on it are visible drift rather than
     per-page tuning. -0.035em is what work/ and contact/ -- the two most
     recently designed pages -- each chose independently; --tracking-tight
     (-0.02em) is a general heading value that reads loose at 62px.
     Leading 0.98 over work's 0.95: the size is now uniform, headlines
     are not, and 0.95 leaves no room at this size.

     Arabic takes NEITHER. Negative tracking damages the joined script,
     and Cairo's ascenders and marks need more leading than Outfit. Five
     ad-hoc `[dir=rtl] { letter-spacing: 0 }` rules already existed, one
     per component -- proof the rule was known and applied piecemeal. */
  --h-page-track:      -0.035em;
  --h-page-leading:    0.98;
  --h-leading-rtl:     1.2;

  /* ---- Kicker: the small uppercase label above a heading ----
     Was authored four times at 13/15px, 0.08/0.12/0.14/0.16em tracking,
     weight 600/700 and four different colours. --brand-accent (#C9A227)
     reaches only ~2.4:1 on white, so the colour steps to accent-dark,
     which clears AA on white and on --ground-tint. */
  --kicker-size:   var(--fs-xs);
  --kicker-track:  0.14em;
  --kicker-weight: 700;
  /* --brand-accent-dark alone measures 4.62 on white but only 4.10 on
     --ground-tint, and the kicker now appears on both. One notch down
     clears AA on each: 5.46 on white, 4.85 on tint. (The old value was
     --brand-accent at 2.42 -- this role has never passed until now.) */
  --kicker-color:  color-mix(in srgb, var(--brand-accent-dark) 90%, #000);
  --kicker-color-on-dark: var(--brand-accent-light);

  /* ---- Spacing scale (rem) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* ---- Radius ---- */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 6px 16px -6px rgba(17, 24, 39, 0.14);
  --shadow-lg: 0 18px 40px -12px rgba(17, 24, 39, 0.22);
  --shadow-accent: 0 10px 30px -8px color-mix(in srgb, var(--brand-accent) 55%, transparent);

  /* ---- Motion ---- */
  --transition-fast: 140ms ease;
  --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* The card lift. Five components in three files each hard-coded this
     pair; a sixth used -3px and a seventh had no hover at all. */
  --lift-hover-y: -4px;
  --lift-hover-shadow: var(--shadow-lg);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.5rem;
  --z-header: 100;
  --z-overlay: 200;
  --z-toast: 300;
}