/**
 * tokens.css
 * ─────────────────────────────────────────────────────────────
 * Source of truth for all CSS custom properties.
 * Structure: Primitives → Semantic tokens
 *
 * Rules:
 *  - Components reference SEMANTIC tokens only
 *  - Semantic tokens reference PRIMITIVE tokens only
 *  - Never use primitive tokens directly in component styles
 *
 * Skin: editorial / indie-publishing — cream background, deep
 * blue brand, multi-colour accent palette, all-sans Geist type.
 * Inspired by workshopsurvival.com.
 * ─────────────────────────────────────────────────────────────
 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {

  /* ─── PRIMITIVES ──────────────────────────────────────────── */

  /* Neutral palette — warm cream scale (workshop-inspired) */
  --primitive-neutral-0:   #FFFFFF;  /* pure white — surface / cards on cream */
  --primitive-neutral-50:  #ECE7DB;  /* warm cream — page bg (workshop off-white) */
  --primitive-neutral-100: #F2EDE2;  /* lighter cream — bg-subtle */
  --primitive-neutral-200: #E5DFCF;  /* card backdrop */
  --primitive-neutral-300: #D6CFBC;  /* divider on cream */
  --primitive-neutral-400: #B5AE99;  /* border-strong */
  --primitive-neutral-500: #8C8676;  /* mid neutral */
  --primitive-neutral-600: #5C5849;  /* secondary text on cream */
  --primitive-neutral-700: #36342D;  /* near-black variant */
  --primitive-neutral-800: #212125;  /* primary text (workshop off-black) */
  --primitive-neutral-900: #0F0F11;  /* deepest near-black */
  --primitive-neutral-950: #030305;  /* dark-mode bg */

  /* Brand palette — workshop blue scale */
  --primitive-brand-50:  #EEEEFD;  /* tint */
  --primitive-brand-100: #D0D1FA;
  --primitive-brand-200: #A2A4F4;
  --primitive-brand-300: #7376EE;
  --primitive-brand-400: #4549E4;
  --primitive-brand-500: #3338DD;  /* workshop blue — primary CTA */
  --primitive-brand-600: #2B30C4;  /* hover */
  --primitive-brand-700: #2126A0;  /* active */
  --primitive-brand-800: #181C7E;
  --primitive-brand-900: #11135C;

  /* Accent palette — editorial multi-colour (workshop-inspired) */
  --primitive-accent-orange: #FF542F;  /* hot orange — energetic accent */
  --primitive-accent-yellow: #F6BE0C;  /* sunny yellow */
  --primitive-accent-green:  #42A853;  /* fresh green */
  --primitive-accent-pink:   #F3A3D5;  /* soft pink */
  --primitive-accent-red:    #B20305;  /* hot red — brutalist mark of emphasis (heyday-inspired) */

  /* Feedback palettes */
  --primitive-green-50:  #F0FDF4;
  --primitive-green-400: #4ADE80;
  --primitive-green-500: #22C55E;
  --primitive-green-600: #16A34A;

  --primitive-yellow-50:  #FEFCE8;
  --primitive-yellow-400: #FACC15;
  --primitive-yellow-500: #EAB308;
  --primitive-yellow-600: #CA8A04;

  --primitive-red-50:  #FEF2F2;
  --primitive-red-400: #F87171;
  --primitive-red-500: #EF4444;
  --primitive-red-600: #DC2626;

  --primitive-blue-50:  #EFF6FF;
  --primitive-blue-400: #60A5FA;
  --primitive-blue-500: #3B82F6;
  --primitive-blue-600: #2563EB;

  /* Editorial deck-status — muted to fit the warm linen palette */
  --primitive-status-ok-600:   #2D7A5F;
  --primitive-status-ok-50:    #E3EFEA;  /* tint: "Counted" chips (app forecast) */
  --primitive-status-warn-600: #A8661C;
  --primitive-status-warn-700: #8A5316;  /* text on the warn-50 tint (5.3:1) */
  --primitive-status-warn-50:  #F5E9D8;  /* tint: [check] notes, paused decks */

  /* Flag palette — drawn language flags (mirrors app Flag.tsx) */
  --primitive-flag-pt-green:  #046A38;
  --primitive-flag-pt-red:    #DA291C;
  --primitive-flag-pt-yellow: #FFE900;
  --primitive-flag-br-green:  #009C3B;
  --primitive-flag-br-yellow: #FEDD00;
  --primitive-flag-br-blue:   #012169;
  --primitive-flag-nl-red:    #AE1C28;
  --primitive-flag-nl-blue:   #21468B;

  /* Spacing — 8pt grid */
  --primitive-space-0:   0px;
  --primitive-space-0-5: 4px;
  --primitive-space-1:   8px;
  --primitive-space-2:   16px;
  --primitive-space-3:   24px;
  --primitive-space-4:   32px;
  --primitive-space-5:   40px;
  --primitive-space-6:   48px;
  --primitive-space-8:   64px;
  --primitive-space-10:  80px;
  --primitive-space-12:  96px;
  --primitive-space-16:  128px;
  --primitive-space-9:   72px;
  --primitive-space-20:  160px;
  --primitive-space-24:  192px;

  /* Font families — Geist primary (Suisse-alike), Inter fallback */
  --primitive-font-sans:  "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --primitive-font-serif: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --primitive-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Fira Code", monospace;

  /* Font sizes */
  --primitive-text-xs:   12px;
  --primitive-text-sm:   14px;
  --primitive-text-base: 16px;
  --primitive-text-lg:   18px;
  --primitive-text-xl:   20px;
  --primitive-text-2xl:  24px;
  --primitive-text-3xl:  30px;
  --primitive-text-4xl:  36px;
  --primitive-text-5xl:  48px;
  --primitive-text-6xl:  60px;

  /* Font weights */
  --primitive-weight-regular:  400;
  --primitive-weight-medium:   500;
  --primitive-weight-semibold: 600;
  --primitive-weight-bold:     700;
  --primitive-weight-extrabold: 800;
  --primitive-weight-black:    900;

  /* Line heights — incl. tighter editorial values for serif display */
  --primitive-leading-none:         1;
  --primitive-leading-display:      1.05;   /* serif headlines */
  --primitive-leading-display-snug: 1.2;    /* sub-display */
  --primitive-leading-tight:        1.25;
  --primitive-leading-snug:         1.375;
  --primitive-leading-normal:       1.5;
  --primitive-leading-relaxed:      1.625;

  /* Letter-spacing primitives */
  --primitive-tracking-display: -0.012em;
  --primitive-tracking-eyebrow: 0.14em;

  /* Radii */
  --primitive-radius-none: 0px;
  --primitive-radius-xs:   2px;
  --primitive-radius-sm:   4px;
  --primitive-radius-md:   8px;
  --primitive-radius-lg:   12px;
  --primitive-radius-xl:   16px;
  --primitive-radius-2xl:  24px;
  --primitive-radius-3xl:  32px;
  --primitive-radius-full: 9999px;

  /* Motion — values tuned to the lived-in feel of the marketing site */
  --primitive-duration-fast:   140ms;
  --primitive-duration-normal: 240ms;
  --primitive-duration-slow:   320ms;
  --primitive-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --primitive-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --primitive-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ─── SEMANTIC TOKENS ─────────────────────────────────────── */

  /* Backgrounds — white page, cream cards (light-mode) */
  --color-bg:              var(--primitive-neutral-0);   /* white page bg */
  --color-bg-subtle:       var(--primitive-neutral-100); /* recessed cream */
  --color-surface:         var(--primitive-neutral-50);  /* cream card surface */
  --color-surface-raised:  var(--primitive-neutral-0);
  --color-surface-overlay: var(--primitive-neutral-0);

  /* Borders */
  --color-border:          var(--primitive-neutral-300);
  --color-border-strong:   var(--primitive-neutral-400);
  --color-border-focus:    var(--primitive-brand-500);

  /* Text */
  --color-text-primary:    var(--primitive-neutral-800);
  --color-text-secondary:  var(--primitive-neutral-600);
  --color-text-muted:      var(--primitive-neutral-500);
  --color-text-disabled:   var(--primitive-neutral-400);
  --color-text-inverse:    var(--primitive-neutral-0);
  --color-text-on-primary: var(--primitive-neutral-0);

  /* Brand / Interactive — workshop blue */
  --color-primary:         var(--primitive-brand-500);
  --color-primary-hover:   var(--primitive-brand-600);
  --color-primary-active:  var(--primitive-brand-700);
  --color-primary-subtle:  var(--primitive-brand-50);
  --color-primary-text:    var(--primitive-brand-600);
  --color-accent-italic:   var(--primitive-brand-500);  /* editorial italic accent — now blue */

  /* Editorial accents — for callouts, highlights, decoration */
  --color-accent-orange:   var(--primitive-accent-orange);
  --color-accent-yellow:   var(--primitive-accent-yellow);
  --color-accent-green:    var(--primitive-accent-green);
  --color-accent-pink:     var(--primitive-accent-pink);
  --color-accent-red:      var(--primitive-accent-red);

  /* Font-weight roles — semantic anchors for body / display / strong text.
     Components reference these instead of raw weight primitives. */
  --font-weight-body:    var(--primitive-weight-semibold);   /* 600 — body baseline */
  --font-weight-strong:  var(--primitive-weight-bold);       /* 700 — buttons, eyebrow */
  --font-weight-display: var(--primitive-weight-black);      /* 900 — h1 / hero */
  --font-weight-heading: var(--primitive-weight-extrabold);  /* 800 — h2 / h3 */

  /* Section panels — colour-blocked layout (workshop-inspired) */
  --color-section-yellow:  var(--primitive-accent-yellow);
  --color-section-pink:    var(--primitive-accent-pink);
  --color-section-dark:    var(--primitive-neutral-800);
  --color-section-cream:   var(--primitive-neutral-50);

  /* Spotlight card surface — always pure white regardless of OS mode.
     Used for the "buy me" available deck cards which need to read as
     a lifted clean card on any background. NOT overridden in dark mode. */
  --color-card-spotlight: var(--primitive-neutral-0);

  /* Success */
  --color-success:         var(--primitive-green-500);
  --color-success-hover:   var(--primitive-green-600);
  --color-success-subtle:  var(--primitive-green-50);
  --color-success-text:    var(--primitive-green-600);
  --color-success-border:  var(--primitive-green-400);

  /* Warning */
  --color-warning:         var(--primitive-yellow-500);
  --color-warning-hover:   var(--primitive-yellow-600);
  --color-warning-subtle:  var(--primitive-yellow-50);
  --color-warning-text:    var(--primitive-yellow-600);
  --color-warning-border:  var(--primitive-yellow-400);

  /* Error */
  --color-error:           var(--primitive-red-500);
  --color-error-hover:     var(--primitive-red-600);
  --color-error-subtle:    var(--primitive-red-50);
  --color-error-text:      var(--primitive-red-600);
  --color-error-border:    var(--primitive-red-400);

  /* Info */
  --color-info:            var(--primitive-blue-500);
  --color-info-hover:      var(--primitive-blue-600);
  --color-info-subtle:     var(--primitive-blue-50);
  --color-info-text:       var(--primitive-blue-600);
  --color-info-border:     var(--primitive-blue-400);

  /* Focus ring */
  --color-focus-ring:      var(--primitive-brand-300);

  /* Border-on-dark — low-opacity divider used over dark surfaces (footer).
     Defined as a semantic token (per Hard Rules: no inline rgba). */
  --color-border-on-dark:  rgba(236, 231, 219, 0.14);  /* tint of cream */

  /* Editorial deck-status — muted ok/warn that read on warm linen */
  --color-status-ok:    var(--primitive-status-ok-600);
  --color-status-ok-subtle: var(--primitive-status-ok-50);
  --color-status-warn:  var(--primitive-status-warn-600);
  --color-status-warn-subtle: var(--primitive-status-warn-50);
  --color-status-warn-text:   var(--primitive-status-warn-700);

  /* Language flags — literal flag colours, identical in both modes */
  --color-flag-pt-green:  var(--primitive-flag-pt-green);
  --color-flag-pt-red:    var(--primitive-flag-pt-red);
  --color-flag-pt-yellow: var(--primitive-flag-pt-yellow);
  --color-flag-br-green:  var(--primitive-flag-br-green);
  --color-flag-br-yellow: var(--primitive-flag-br-yellow);
  --color-flag-br-blue:   var(--primitive-flag-br-blue);
  --color-flag-nl-red:    var(--primitive-flag-nl-red);
  --color-flag-nl-blue:   var(--primitive-flag-nl-blue);

  /* Page-tint surface (used by .preview-frame-outer — wraps a card preview
     in a slightly darker tone to recede from the surrounding white) */
  --color-bg-page-tint: var(--primitive-neutral-200);

  /* Spacing aliases */
  --space-xs:        var(--primitive-space-0-5);   /*  4px */
  --space-sm:        var(--primitive-space-1);     /*  8px */
  --space-md:        var(--primitive-space-2);     /* 16px */
  --space-lg:        var(--primitive-space-3);     /* 24px */
  --space-xl:        var(--primitive-space-4);     /* 32px */
  --space-2xl:       var(--primitive-space-6);     /* 48px */
  --space-3xl-tight: var(--primitive-space-9);     /* 72px — between 64 and 96 */
  --space-3xl:       var(--primitive-space-8);     /* 64px */
  --space-4xl:       var(--primitive-space-12);    /* 96px */

  /* Radius aliases — sharpened for workshop editorial feel */
  --radius-sm:   var(--primitive-radius-xs);   /* 2px — was 4 */
  --radius-md:   var(--primitive-radius-sm);   /* 4px — was 8 */
  --radius-lg:   var(--primitive-radius-md);   /* 8px — was 12 */
  --radius-xl:   var(--primitive-radius-lg);   /* 12px — was 16 */
  --radius-2xl:  var(--primitive-radius-xl);   /* 16px — was 24 */
  --radius-full: var(--primitive-radius-full);

  /* Panel — soft rounding for full-width section blocks */
  --radius-panel: var(--primitive-radius-3xl); /* 32px — bubblier */

  /* Card — single unified rounding for every card-like surface
     (hero panel, pillar cards, deck cards, hero specimen, FAQ items,
     preview frames). Keep this one number so the language across
     the page stays consistent. */
  --radius-card: var(--primitive-radius-3xl);  /* 32px — bubblier */

  /* Button — pill shape (workshop-inspired) */
  --radius-button: var(--primitive-radius-full);

  /* Section gap — the rhythm between adjacent panels / sections.
     Matches the inner grid gap so panels feel like parts of one
     coherent block, not floating islands. */
  --space-section-gap: clamp(24px, 4vw, 56px);

  /* Shadow — neutral elevation scale + brand-tinted variant for editorial cards */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-brand: 0 4px 32px rgba(51, 56, 221, 0.10);   /* workshop blue glow for cards / hero specimen */
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* Motion */
  --duration-fast:   var(--primitive-duration-fast);
  --duration-normal: var(--primitive-duration-normal);
  --duration-slow:   var(--primitive-duration-slow);
  --ease-default:    var(--primitive-ease-in-out);
  --ease-enter:      var(--primitive-ease-out);
  --ease-exit:       var(--primitive-ease-in);
  --ease-spring:     var(--primitive-ease-spring);

  /* Font */
  --font-sans:  var(--primitive-font-sans);
  --font-serif: var(--primitive-font-serif);
  --font-mono:  var(--primitive-font-mono);

  /* ─── Typography roles (semantic) ──────────────────────────────
     Components reference these — never raw font-size values. */
  --text-display:    clamp(3rem, 7.5vw, 6rem);       /* hero title — brutalist scale */
  --text-h1:         clamp(2.5rem, 5.5vw, 4.5rem);   /* page / section title — brutalist scale */
  --text-h2:         clamp(1.6rem, 3vw,   2.2rem);   /* section title */
  --text-h3:         1.5rem;                          /* card title */
  --text-h4:         1.25rem;                         /* sub-card */
  --text-h5:         1.125rem;                        /* small heading */
  --text-lede:       clamp(1.05rem, 1.4vw, 1.2rem);  /* lead paragraph */
  --text-body-lg:    var(--primitive-text-lg);        /* 18px */
  --text-body:       var(--primitive-text-base);      /* 16px */
  --text-body-sm:    var(--primitive-text-sm);        /* 14px */
  --text-meta:       var(--primitive-text-sm);        /* 14px */
  --text-eyebrow:    var(--primitive-text-xs);        /* 12px */
  --text-fine:       var(--primitive-text-xs);        /* 12px (footer fine-print) */
  --text-numeric-xl: clamp(2rem, 4vw, 2.5rem);        /* deck stat numbers */
  --text-numeric-md: clamp(1.5rem, 2.5vw, 2.2rem);    /* secondary stat numbers */

  /* Line-heights */
  --leading-display: var(--primitive-leading-display);
  --leading-snug:    var(--primitive-leading-display-snug);
  --leading-tight:   var(--primitive-leading-tight);
  --leading-normal:  var(--primitive-leading-normal);
  --leading-relaxed: var(--primitive-leading-relaxed);
  --leading-body:    1.55;   /* editorial body — between normal and relaxed */

  /* Tracking */
  --tracking-display: var(--primitive-tracking-display);
  --tracking-eyebrow: var(--primitive-tracking-eyebrow);

  /* ─── Layout tokens ─────────────────────────────────────────── */
  --layout-max-content: 1200px;
  --layout-max-read:    62ch;
  --layout-nav-h:       64px;
}


/* ─── DARK MODE ───────────────────────────────────────────────
   Only redefine semantic tokens here.
   Primitive tokens are identical in both modes.
────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              var(--primitive-neutral-950);
    --color-bg-subtle:       var(--primitive-neutral-900);
    --color-surface:         var(--primitive-neutral-900);
    --color-surface-raised:  var(--primitive-neutral-800);
    --color-surface-overlay: var(--primitive-neutral-800);

    --color-border:          var(--primitive-neutral-700);
    --color-border-strong:   var(--primitive-neutral-500);

    --color-text-primary:    var(--primitive-neutral-50);
    --color-text-secondary:  var(--primitive-neutral-400);
    --color-text-muted:      var(--primitive-neutral-500);
    --color-text-disabled:   var(--primitive-neutral-600);
    --color-text-inverse:    var(--primitive-neutral-900);

    --color-primary-subtle:  var(--primitive-brand-900);
    --color-primary-text:    var(--primitive-brand-300);
  }
}