/* ==========================================================================
   phr0ztMEDIA — design tokens  v1.0
   Owned by design. Consumed by the Launch Page system (system.css).

   RULE: never inline a raw value in a component. If the token you need does
   not exist here, it is a system change — raise it, do not invent it locally.

   FONTS (self-hosted, licences recorded in ./fonts/)
     Space Grotesk — SIL Open Font License 1.1 — ./fonts/LICENCE-SpaceGrotesk-OFL.txt
     Inter         — SIL Open Font License 1.1 — ./fonts/LICENCE-Inter-OFL.txt
   Both OFL 1.1: free for commercial client work, embedding and self-hosting.
   No paid assets. No third-party font CDN request at runtime.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/spacegrotesk-latin-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-latin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* ---------------------------------------------------------------- COLOUR
     Three families only: ink (dark surfaces), paper (light surfaces),
     signal (the one accent). Every value below is contrast-verified by
     ./check-contrast.py — do not substitute by eye.                              */

  --ink-900: #0B0D0E;   /* dark page background                             */
  --ink-800: #16191D;   /* raised card on dark                              */
  --ink-700: #2E353C;   /* hairline divider on dark  (1.57:1, decorative)   */
  --ink-600: #626E78;   /* UI component border on dark (3.73:1 — WCAG 1.4.11) */

  --paper-000: #FFFFFF; /* white                                            */
  --paper-050: #F4F5F6; /* light section background                         */
  --paper-200: #D4D9DD; /* hairline divider on light (1.30:1, decorative)   */
  --paper-400: #7A848C; /* UI component border on light (3.49:1 — 1.4.11)   */

  --signal-500: #22E0C8; /* accent on dark; CTA fill                        */
  --signal-600: #0FBFA8; /* CTA fill, hover/active                          */
  --signal-800: #08705F; /* accent TEXT on light surfaces (5.51:1)          */

  --danger-dark:  #FF8080; /* error text on dark  (8.02:1)                  */
  --danger-light: #A81D1A; /* error text on light (6.74:1)                  */

  /* Text. Never used raw — consumed through the surface scopes below. */
  --text-hi-dark:  #F5F7F8;  /* 18.13:1 on ink-900                          */
  --text-lo-dark:  #9FA9B2;  /*  8.16:1 on ink-900                          */
  --text-hi-light: #0B0D0E;  /* 17.84:1 on paper-050                        */
  --text-lo-light: #555E65;  /*  6.06:1 on paper-050                        */

  /* ---------------------------------------------------------------- SPACE
     4px base. Name == px value. No other gaps are legal.                   */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-6:  1.5rem;   /*  24px */
  --space-8:  2rem;     /*  32px */
  --space-12: 3rem;     /*  48px */
  --space-16: 4rem;     /*  64px */
  --space-24: 6rem;     /*  96px */
  --space-32: 8rem;     /* 128px */

  /* Section rhythm + container. Every section uses --section-y, no exceptions. */
  --section-y: clamp(4rem, 9vw, 8rem);      /*  64px -> 128px */
  --container: 75rem;                        /* 1200px        */
  --gutter:    clamp(1.5rem, 4vw, 2.5rem);   /*  24px ->  40px */
  --measure:   60ch;                         /* max body line length */

  /* ----------------------------------------------------------------- TYPE
     Two families, two weights each. Three body sizes. That is the whole
     scale — if you need a fourth, you are solving a layout problem with
     type. Fix the layout.                                                  */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --weight-display-regular: 500;
  --weight-display-bold:    700;
  --weight-body-regular:    400;
  --weight-body-medium:     500;

  /* display-1 — one per page, hero only */
  --type-display-1-size:    clamp(2.5rem, 6vw, 4.5rem);  /* 40 -> 72px */
  --type-display-1-lh:      1.03;
  --type-display-1-tracking: -0.03em;
  /* display-2 — section headlines */
  --type-display-2-size:    clamp(1.875rem, 4vw, 3rem);  /* 30 -> 48px */
  --type-display-2-lh:      1.08;
  --type-display-2-tracking: -0.02em;
  /* heading-1 — card / feature titles */
  --type-heading-1-size:    1.375rem;  /* 22px */
  --type-heading-1-lh:      1.25;
  --type-heading-1-tracking: -0.01em;
  /* heading-2 — small titles, pricing tier names */
  --type-heading-2-size:    1.0625rem; /* 17px */
  --type-heading-2-lh:      1.35;
  --type-heading-2-tracking: 0;
  /* body */
  --type-body-lg-size: 1.125rem;  /* 18px — hero subhead, lead paragraphs */
  --type-body-lg-lh:   1.6;
  --type-body-size:    1rem;      /* 16px — default */
  --type-body-lh:      1.65;
  --type-body-sm-size: 0.875rem;  /* 14px — captions, footnotes, meta */
  --type-body-sm-lh:   1.55;
  /* price — pricing tiers only. Deliberately smaller than display-2: a
     3-up tier card is ~330px wide and "$2,000–3,500" wraps at 48px. */
  --type-price-size: 2rem;  /* 32px */
  --type-price-lh:   1.1;
  /* label — eyebrows, kickers, index numerals */
  --type-label-size:     0.75rem; /* 12px */
  --type-label-lh:       1.2;
  --type-label-tracking: 0.12em;

  /* --------------------------------------------------------------- RADIUS */
  --radius-sm:   4px;   /* inputs, tags            */
  --radius-md:   8px;   /* cards, media slots      */
  --radius-lg:  16px;   /* large panels            */
  --radius-pill: 999px; /* buttons, eyebrow chips  */

  /* --------------------------------------------------------------- BORDER */
  --border-hairline: 1px;
  --border-ui:       1px;

  /* -------------------------------------------------------------- ELEVATION
     Shadows do almost nothing on near-black. On dark surfaces, separation
     comes from --ink-700 hairlines, not shadow.                            */
  --shadow-1: 0 1px 2px rgba(11, 13, 14, 0.28);
  --shadow-2: 0 12px 32px -12px rgba(11, 13, 14, 0.45);
  --shadow-cta: 0 10px 28px -12px rgba(34, 224, 200, 0.45);

  /* ---------------------------------------------------------------- MOTION
     One easing curve. One set of durations. See `hero-reveal` in system.css
     — it is the only animation on the page.                                */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;  /* hover / focus state changes       */
  --dur-base: 240ms;  /* interactive transitions           */
  --dur-slow: 420ms;  /* hero-reveal element rise          */
  --dur-rule: 520ms;  /* hero-reveal signal rule draw      */
  --stagger:   70ms;  /* hero-reveal step between elements */

  --focus-width:  3px;
  --focus-offset: 3px;
}

/* ==========================================================================
   SURFACE SCOPES
   A section declares which surface it is. Text, border, accent and focus
   colours all resolve from that — so a component is written once and is
   correct on both. Never hand a component a hard-coded text colour.
   ========================================================================== */

.surface-dark {
  --surface:        var(--ink-900);
  --surface-raised: var(--ink-800);
  --text-hi:        var(--text-hi-dark);
  --text-lo:        var(--text-lo-dark);
  --divider:        var(--ink-700);
  --border-input:   var(--ink-600);
  --accent-text:    var(--signal-500);   /* 11.65:1 — AA for text */
  --accent-fill:    var(--signal-500);
  --accent-fill-hover: var(--signal-600);
  --accent-fill-text:  var(--ink-900);   /* 11.65:1 on fill */
  --danger:         var(--danger-dark);
  --focus-ring:     var(--signal-500);   /* 11.65:1 vs surface */
  /* Hero wash. The bright accent glows correctly against near-black. */
  --hero-glow:      color-mix(in srgb, var(--signal-500) 12%, transparent);
  background-color: var(--surface);
  color: var(--text-hi);
}

.surface-light {
  --surface:        var(--paper-050);
  --surface-raised: var(--paper-000);
  --text-hi:        var(--text-hi-light);
  --text-lo:        var(--text-lo-light);
  --divider:        var(--paper-200);
  --border-input:   var(--paper-400);
  --accent-text:    var(--signal-800);   /* 5.51:1 — signal-500 FAILS here */
  --accent-fill:    var(--ink-900);      /* on light, the CTA is ink, not signal */
  --accent-fill-hover: #1F252A;
  --accent-fill-text:  var(--paper-000); /* 19.48:1 on fill */
  --danger:         var(--danger-light);
  --focus-ring:     var(--signal-800);   /* 5.51:1 vs surface */
  /* On light, the hero wash must use the BRIGHT accent. Using the dark
     accent-text here renders as a grey smudge, not a tint. */
  --hero-glow:      color-mix(in srgb, var(--signal-500) 18%, transparent);
  /* And the CTA lift must be neutral — an amber glow under a black button
     reads as a rendering artefact. */
  --shadow-cta:     0 10px 28px -12px rgba(11, 13, 14, 0.35);
  background-color: var(--surface);
  color: var(--text-hi);
}

/* ==========================================================================
   CLIENT ACCENT SWAP
   Launch Page is fixed-price, so the per-client change must be a token
   override, never a redesign. Overriding these four values is the entire
   visual customisation surface. Any candidate accent MUST pass all four
   gates in ./check-contrast.py before it ships:
     1. accent-text on ink-900      >= 4.5:1
     2. accent-fill-text on fill    >= 4.5:1
     3. accent-text-light on #F4F5F6 >= 4.5:1
     4. accent used as focus ring   >= 3.0:1 on both surfaces
   ========================================================================== */

[data-accent='amber'] {
  --signal-500: #FFB020;
  --signal-600: #E59400;
  --signal-800: #6E4A00;
  --shadow-cta: 0 10px 28px -12px rgba(255, 176, 32, 0.45);
}