/* RKS design tokens, extracted from the live Elementor global kit (post 4999,
   rksdesign.com) on 2026-08-04 via WP-CLI. This is the canonical style source for
   the migration templates: matching the live site's tokens is what lets a
   converted page sit next to an un-converted one without a visible seam.

   Moved here from website/migration/tokens.css at scaffold time (2026-08-05).
   Edit this file, not a copy. */

/* ---- Self-hosted Poppins (OFL) ----------------------------------------------
   woff2, latin subset, pulled from the live Elementor google-fonts files so the
   glyphs match the live site exactly. Weights 300/400/500/600 = the set the kit
   and the About archetype use. `font-display: swap` paints fallback text first and
   swaps Poppins in on load (no invisible-text flash). The latin unicode-range
   covers everything the site sets: basic Latin, ® ™, en dash, and curly quotes.
   base.njk preloads the 400 + 600 files, the weights above the fold. */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/poppins-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Color ---- */
  --bg: #FFFFFF;            /* body background */
  --ink: #000000;          /* body text + all headings (kit body_color / h1_color) */
  --ink-soft: #3C3C3C;     /* "Off black" secondary text */
  --brand: #4054B2;        /* brand blue (kit Saved Color #5) — primary accent: buttons, links */
  --brand-green: #23A455;  /* kit Saved Color #6 */
  --danger: #FF0000;       /* kit Hover/Red. NOT for text: 3.9985:1 on white fails AA. */

  /* ---- Brand red, by GROUND (2026-09-18) ----------------------------------------
     The logo red was only ever checked on pure white, where it clears AA by a hair
     (4.5033:1). On the site's other grounds it FAILED (4.09:1 on the #141414 feature
     panel, 4.25:1 on the #FAF8F4 source panel). So red TEXT now always comes from the
     token for the ground it sits on. Same hue (2.9 deg) and saturation; only lightness
     moves, so all three read as the RKS red. Every value is asserted by
     scripts/census-brand-red.js; add a new ground here, never a raw hex in styles.css.
       --brand-red      #EC1308  on #FFFFFF  4.50:1   (white grounds ONLY)
       --brand-on-dark  #F7261B  on #141414  4.60:1   (lighter, for dark panels)
       --brand-on-tint  #E11208  on #FAF8F4  4.61:1   (darker; 4.89:1 on white too)
     --error-text is the form error line (not the brand red, a duller red): 5.25:1 on
     white. On the dark home banner the status line is white instead; see styles.css. */
  --brand-red: #EC1308;
  --brand-on-dark: #F7261B;
  --brand-on-tint: #E11208;
  --error-text: #C8352A;
  --lightbox: #FFFFFF;
  /* NOTE: the kit's abstract "accent" slot is #000000; the brand color used on
     buttons/links is #4054B2. Raspberry #CC3366 seen on a few live elements is NOT
     in the global system (not in kit, theme, or Elementor CSS) — treat as a local
     override and confirm the intended link/hover color on the pilot page. */

  /* ---- Type (Poppins throughout; self-hosted weights 400 / 500 / 600) ---- */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 48px;      /* kit custom "Title" */
  --fs-accent: 40px;       /* kit system Accent, weight 500 */
  --fs-h1: 32px;           /* kit system Primary, weight 600 */
  --fs-h2: 28px;           /* kit system Secondary, weight 400 */
  --fs-lead: 20px;         /* kit system Text, weight 400 */
  --fs-body: 18px;  --lh-body: 28px;
  --fs-sm: 16px;    --lh-sm: 22px;
  --fs-xs: 14px;
  --fw-body: 400;  --fw-medium: 500;  --fw-bold: 600;

  /* ---- Layout ---- */
  --container: 1150px;     /* kit container_width */
  --bp-mobile: 767px;      /* <= mobile   (kit viewport_mobile) */
  --bp-tablet: 1024px;     /* <= tablet   (kit viewport_tablet); desktop >= 1025 */

  /* ---- Components ---- */
  --radius-pill: 24px;     /* buttons: outline pill (per prior A12 sample; confirm on pilot) */
  --radius-card: 16px;     /* live About cards (reason / process / story image) */

  /* ---- About / marketing archetype (extracted from live post-12922.css) ---- */
  --fs-hero: 2.5rem;       /* hero title, 40px / weight 600 / white on photo */
  --fs-statement: 1.8rem;  /* large light statement, 28.8px / weight 300 / lh 46px */
  --fs-num: 4rem;          /* reason-card index number, 64px */
  --lh-heading: 46px;      /* live large-heading line-height */
  --fw-light: 300;         /* Poppins light — the statement weight */
  --bg-muted: #F5F5F5;     /* alternating section background (story, reasons) */
  --bg-muted-2: #F3F3F3;   /* client logo wall background */
  --grad-warm: linear-gradient(180deg, #F27529 0%, #F2295B 100%);  /* reason cards */

  /* ---- Hero heights (2026-09-17, Alex) ---------------------------------------
     ONE place to change them. Before this they were hardcoded in six places in
     styles.css (.svc-hero 50vh + a 190px phone override, .about-hero 50/40vh,
     .pa-hero 50/46vh, .contact-hero 450/340px), so a height change meant six edits
     and the phone overrides silently undid the desktop intent.

     --hero-h-main   drives the service, market, About and Psycho-Aesthetics heroes.
     --hero-h-contact drives Contact, which is deliberately shorter (it is a form
     page: the form should be near the fold).
     The clamp floor is what phones get, which is why the old 190px / 340px / 40vh
     phone overrides are gone: a 440px floor is the phone height.
     svh, not vh, on the fluid middle so mobile browser chrome cannot clip the hero
     (same two-declaration fallback .home-hero already uses: the vh line is for
     engines without svh, the svh line wins where it is supported).

     NOT tokenised on purpose: the homepage (100vh/100svh, a full-viewport video
     stage) and case studies (90vh), which Alex kept unchanged. ------------------- */
  --hero-h-main: clamp(440px, 66vh, 760px);
  --hero-h-main: clamp(440px, 66svh, 760px);
  --hero-h-contact: clamp(420px, 52vh, 560px);
  --hero-h-contact: clamp(420px, 52svh, 560px);
  /* Space under the bottom-anchored hero text. Viewport-relative so a tall hero
     breathes more, with a fixed floor so a phone never crushes it. NOT a percentage:
     percentage padding resolves against WIDTH, so 5% collapses to ~19px on a phone. */
  --hero-pad-bottom: clamp(28px, 6vh, 72px);
  /* Top clearance inside the hero so a long title that wraps to three lines never
     slides under the fixed header (~86px) as it grows upward from the bottom. */
  --hero-pad-top: 110px;
}