/* src/styles/tokens/primitives.css */
:root {
  /* Base */
  --color-white: #ffffff;
  --color-white-rgb: 255 255 255;

  /* Color Primitives */
  --color-ink-50: #fcfcfc;
  --color-ink-100: #f7f7f7;
  --color-ink-200: #e6e6e5;
  --color-ink-300: #cccccc;
  --color-ink-400: #b2b2b1;
  --color-ink-500: #999998;
  --color-ink-600: #8a8a8a;
  --color-ink-700: #5c5c5c;
  --color-ink-800: #3d3d3d;
  --color-ink-900: #1f1f1f;
  --color-ink-950: #141414;
  --color-ink-50-rgb: 252 252 252;
  --color-ink-950-rgb: 20 20 20;

  --color-seafoam-50: #eff6f6;
  --color-seafoam-100: #e4f0f0;
  --color-seafoam-200: #d7e9e9;
  --color-seafoam-300: #cae2e2;
  --color-seafoam-400: #bfdede;
  --color-seafoam-500: #afd3d3;
  --color-seafoam-600: #9fbfbf;
  --color-seafoam-700: #89a6a6;
  --color-seafoam-800: #6a8080;
  --color-seafoam-900: #556666;
  --color-seafoam-950: #2a3333;
  --color-seafoam-500-rgb: 175 211 211;
  --color-sky-500-rgb: 190 216 229;

  /* Pink */
  --color-pink-50: #fdf0f7;
  --color-pink-100: #fce6f2;
  --color-pink-200: #fad9eb;
  --color-pink-300: #f8cce4;
  --color-pink-400: #f7c0de;
  --color-pink-500: #f5b3d7;
  --color-pink-600: #cc95b3;
  --color-pink-700: #a3778f;
  --color-pink-800: #7b5a6c;
  --color-pink-900: #523c48;
  --color-pink-950: #31242b;

  /* Sky */
  --color-sky-50: #f2f7fa;
  --color-sky-100: #e9f2f6;
  --color-sky-200: #deebf2;
  --color-sky-300: #d4e5ee;
  --color-sky-400: #c9dee9;
  --color-sky-500: #bed8e5;
  --color-sky-600: #9eb4bf;
  --color-sky-700: #7f9099;
  --color-sky-800: #5f6c73;
  --color-sky-900: #3f484c;
  --color-sky-950: #262b2e;

  /* Yellow */
  --color-yellow-50: #fcfbe9;
  --color-yellow-100: #faf9db;
  --color-yellow-200: #f8f6c8;
  --color-yellow-300: #f6f3b6;
  --color-yellow-400: #f3f0a4;
  --color-yellow-500: #f1ed92;
  --color-yellow-600: #c9c57a;
  --color-yellow-700: #a19e61;
  --color-yellow-800: #797749;
  --color-yellow-900: #504f31;
  --color-yellow-950: #302f1d;

  /* Orange */
  --color-orange-50: #ffe7e1;
  --color-orange-100: #ffd7cd;
  --color-orange-200: #fec3b4;
  --color-orange-300: #feaf9b;
  --color-orange-400: #fe9b82;
  --color-orange-500: #fe8769;
  --color-orange-600: #d47158;
  --color-orange-700: #a95a46;
  --color-orange-800: #7f4435;
  --color-orange-900: #552d23;
  --color-orange-950: #331b15;

  /* Navy */
  --color-navy-50: #cfdae6;
  --color-navy-100: #aec1d5;
  --color-navy-200: #86a2bf;
  --color-navy-300: #5e84aa;
  --color-navy-400: #356595;
  --color-navy-500: #0d4680;
  --color-navy-600: #0b3a6b;
  --color-navy-700: #092f55;
  --color-navy-800: #072340;
  --color-navy-900: #04172b;
  --color-navy-950: #030e1a;

  /* Spacing Primitives */
  --spacing-0: 0;
  --spacing-2: 0.125rem; /* 2px */
  --spacing-4: 0.25rem; /* 4px */
  --spacing-8: 0.5rem; /* 8px */
  --spacing-12: 0.75rem; /* 12px */
  --spacing-16: 1rem; /* 16px */
  --spacing-20: 1.25rem; /* 20px */
  --spacing-24: 1.5rem; /* 24px */
  --spacing-32: 2rem; /* 32px */
  --spacing-40: 2.5rem; /* 40px */
  --spacing-48: 3rem; /* 48px */
  --spacing-56: 3.5rem; /* 56px */
  --spacing-60: 3.75rem; /* 60px */
  --spacing-64: 4rem; /* 64px */
  --spacing-72: 4.5rem; /* 72px */
  --spacing-80: 5rem; /* 80px */
  --spacing-96: 6rem; /* 96px */
  --spacing-128: 8rem; /* 128px */
  --spacing-144: 9rem; /* 144px */
  --spacing-160: 10rem; /* 160px */
  --spacing-192: 12rem; /* 192px */
  --spacing-220: 13.75rem; /* 220px */
  --spacing-256: 16rem; /* 256px */

  /* Radius Primitives */
  --radius-0: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-999: 999px;

  /* Border Width Primitives */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* Measure Primitives */
  --measure-sm: 40rem; /* 640px */
  --measure-md: 45rem; /* 720px */
  --measure-lg: 52.5rem; /* 840px */

  /* Typography Primitives */
  --font-family-serif: "Behind The Nineties", Georgia, "Times New Roman", serif;
  --font-family-sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Font Size Primitives */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-24: 1.5rem; /* 24px */
  --font-size-28: 1.75rem; /* 28px */
  --font-size-36: 2.25rem; /* 36px */
  --font-size-48: 3rem; /* 48px  */
  --font-size-60: 3.75rem; /* 60px */
  --font-size-72: 4.5rem; /* 72px */
  --font-size-96: 6rem; /* 96px */
  --font-size-240: 15rem; /* 240px */

  /* Line Height Primitives */
  --line-height-20: 1.25rem; /* 20px */
  --line-height-24: 1.5rem; /* 24px */
  --line-height-28: 1.75rem; /* 28px */
  --line-height-32: 2rem; /* 32px */
  --line-height-36: 2rem; /* 36px */
  --line-height-48: 3rem; /* 48px */
  --line-height-64: 4rem; /* 64px */
  --line-height-72: 4.5rem; /* 72px */
  --line-height-96: 6rem; /* 96px */
  --line-height-112: 7rem; /* 112px */
  --line-height-320: 20rem; /* 320px */
}
/* src/styles/tokens/semantics.css */
/* =====================================
   Semantic tokens (Primitives → Semantic)
   - Unified spacing system
   - Typography aligned exactly to figma-export.json textStyles
   - Theme semantics (sky/yellow/orange/dark)
   ===================================== */

:root {
  /* =====================================================
     SEMANTIC SPACING (unified system)
     ===================================================== */

  /* Page gutters */
  --space-page-inline: var(--spacing-128);

  /* Vertical rhythm (stack) */
  --space-stack-1: var(--spacing-16);
  --space-stack-2: var(--spacing-24);
  --space-stack-3: var(--spacing-32);
  --space-stack-4: var(--spacing-48);
  --space-stack-5: var(--spacing-64);
  --space-stack-6: var(--spacing-96);

  /* Inset / padding */
  --space-inset-1: var(--spacing-24);
  --space-inset-2: var(--spacing-48);
  --space-inset-3: var(--spacing-64);
  --space-inset-4: var(--spacing-96);

  /* Grid gutters */
  --space-grid-1: var(--spacing-24);
  --space-grid-2: var(--spacing-32);
  --space-grid-3: var(--spacing-48);

  /* One intentional exception (hero signature) */
  --space-hero-gap: clamp(var(--spacing-32), 10vh, var(--spacing-96));

  /* =====================================================
     TYPOGRAPHY SEMANTICS (EXACT from figma-export.json)
     Source tokens:
     - typography/Meta/caption
     - typography/Body/sm|base|lg
     - typography/Heading/h1|h2|h3|h4
     - typography/Display/lg|xl|2xl
     ===================================================== */

  /* Meta / caption — 14 / 20, Regular, Behind The Nineties */
  --type-caption-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-caption-font-weight: 400;
  --type-caption-font-size: var(--font-size-14);
  --type-caption-line-height: var(--line-height-20);
  --type-caption-letter-spacing: 0em;
  --type-caption-text-decoration: none;

  /* Body sm — 14 / 20, Regular, Behind The Nineties */
  --type-body-sm-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-body-sm-font-weight: 400;
  --type-body-sm-font-size: var(--font-size-14);
  --type-body-sm-line-height: var(--line-height-20);
  --type-body-sm-letter-spacing: 0em;
  --type-body-sm-text-decoration: none;

  /* Body base — 16 / 24, Regular, Behind The Nineties */
  --type-body-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-body-font-weight: 400;
  --type-body-font-size: var(--font-size-16);
  --type-body-line-height: var(--line-height-24);
  --type-body-letter-spacing: 0em;
  --type-body-text-decoration: none;

  /* Body lg — 24 / 32, Regular, Behind The Nineties */
  --type-body-lg-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-body-lg-font-weight: 400;
  --type-body-lg-font-size: var(--font-size-24);
  --type-body-lg-line-height: var(--line-height-32);
  --type-body-lg-letter-spacing: 0em;
  --type-body-lg-text-decoration: none;

  /* Heading h4 — 28 / 36, Regular, Inter Tight */
  --type-h4-font-family: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --type-h4-font-weight: 400;
  --type-h4-font-size: var(--font-size-28);
  --type-h4-line-height: var(--line-height-36);
  --type-h4-letter-spacing: 0em;
  --type-h4-text-decoration: none;

  /* Heading h3 — 36 / 48, Regular, Behind The Nineties */
  --type-h3-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-h3-font-weight: 400;
  --type-h3-font-size: var(--font-size-36);
  --type-h3-line-height: var(--line-height-48);
  --type-h3-letter-spacing: 0em;
  --type-h3-text-decoration: none;

  /* Heading h2 — 48 / 64, Regular, Behind The Nineties */
  --type-h2-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-h2-font-weight: 400;
  --type-h2-font-size: var(--font-size-48);
  --type-h2-line-height: var(--line-height-64);
  --type-h2-letter-spacing: 0em;
  --type-h2-text-decoration: none;

  /* Heading h1 — 60 / 72, Regular, Behind The Nineties */
  --type-h1-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-h1-font-weight: 400;
  --type-h1-font-size: var(--font-size-60);
  --type-h1-line-height: var(--line-height-72);
  --type-h1-letter-spacing: 0em;
  --type-h1-text-decoration: none;

  /* Display lg — 72 / 96, Medium, Behind The Nineties */
  --type-display-lg-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-display-lg-font-weight: 500;
  --type-display-lg-font-size: var(--font-size-72);
  --type-display-lg-line-height: var(--line-height-96);
  --type-display-lg-letter-spacing: 0em;
  --type-display-lg-text-decoration: none;

  /* Display xl — 96 / 112, Medium, Behind The Nineties */
  --type-display-xl-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-display-xl-font-weight: 500;
  --type-display-xl-font-size: var(--font-size-96);
  --type-display-xl-line-height: var(--line-height-112);
  --type-display-xl-letter-spacing: 0em;
  --type-display-xl-text-decoration: none;

  /* Display 2xl — 240 / 320, Regular, Behind The Nineties */
  --type-display-2xl-font-family: "Behind The Nineties", Georgia, "Times New Roman", Times, serif;
  --type-display-2xl-font-weight: 400;
  --type-display-2xl-font-size: var(--font-size-240);
  --type-display-2xl-line-height: var(--line-height-320);
  --type-display-2xl-letter-spacing: 0em;
  --type-display-2xl-text-decoration: none;

  /* =====================================================
     Utility text decorations
     ===================================================== */
  --text-decoration-none: none;
  --text-decoration-underline: underline;

  /* =====================================================
     THEME: Light (Sky)
     Canvas = 500
     ===================================================== */

  --surface-canvas: var(--color-sky-500);
  --surface-canvas-secondary: var(--color-sky-600);
  --surface-canvas-muted: var(--color-sky-300);
  --surface-canvas-disabled: var(--color-sky-100);

  --surface-neutral: var(--color-navy-800);
  --surface-neutral-inverse: var(--color-ink-50);

  --surface-overlay: rgba(14, 29, 44, 0.92);
  --surface-overlay-active: rgba(255, 255, 255, 0.16);

  --text-default: var(--color-ink-950);
  --text-secondary: var(--color-ink-900);
  --text-muted: var(--color-ink-800);
  --text-disabled: var(--color-ink-500);

  --text-inverse: var(--color-ink-50);

  --icon-default: var(--color-ink-950);
  --icon-muted: var(--color-ink-800);
  --icon-inverse: var(--color-ink-50);

  --border-default: var(--border-width-4) solid var(--color-ink-950);

  --link-default: var(--color-navy-300);
  --link-hover: var(--color-navy-400);
  --link-active: var(--color-navy-200);

  --focus-ring: var(--color-navy-400);

  --surface-canvas-neutral-white: var(--color-white);

  /* Theme Identity Tokens (for switcher) */
  --theme-id-light: var(--color-sky-500);
  --theme-id-yellow: var(--color-yellow-500);
  --theme-id-orange: var(--color-orange-500);
  --theme-id-dark: var(--color-navy-800);
}

/* =====================================================
   THEME: Yellow
   Canvas = 500
   ===================================================== */
:root[data-theme="yellow"] {
  --surface-canvas: var(--color-yellow-500);
  --surface-canvas-secondary: var(--color-yellow-600);
  --surface-canvas-muted: var(--color-yellow-300);
  --surface-canvas-disabled: var(--color-yellow-100);

  --surface-neutral: var(--color-navy-900);
  --surface-neutral-inverse: var(--color-ink-50);

  --text-default: var(--color-ink-950);
  --text-secondary: var(--color-ink-900);
  --text-muted: var(--color-ink-800);
  --text-disabled: var(--color-ink-500);
  --text-inverse: var(--color-ink-50);

  --icon-default: var(--color-ink-950);
  --icon-muted: var(--color-ink-800);
  --icon-inverse: var(--color-ink-50);

  --border-default: var(--border-width-4) solid var(--color-ink-950);

  --link-default: var(--color-yellow-600);
  --link-hover: var(--color-yellow-500);
  --link-active: var(--color-yellow-400);

  --focus-ring: var(--color-ink-950);
}

/* =====================================================
   THEME: Orange
   Canvas = 500
   ===================================================== */
:root[data-theme="orange"] {
  --surface-canvas: var(--color-orange-500);
  --surface-canvas-secondary: var(--color-orange-600);
  --surface-canvas-muted: var(--color-orange-300);
  --surface-canvas-disabled: var(--color-orange-100);

  --surface-neutral: var(--color-navy-900);
  --surface-neutral-inverse: var(--color-ink-50);

  --text-default: var(--color-ink-950);
  --text-secondary: var(--color-ink-900);
  --text-muted: var(--color-ink-800);
  --text-disabled: var(--color-ink-500);
  --text-inverse: var(--color-ink-50);

  --icon-default: var(--color-ink-950);
  --icon-muted: var(--color-ink-800);
  --icon-inverse: var(--color-ink-50);

  --border-default: var(--border-width-4) solid var(--color-ink-950);

  --link-default: var(--color-orange-500);
  --link-hover: var(--color-orange-600);
  --link-active: var(--color-orange-400);

  --focus-ring: var(--color-ink-950);
}

/* =====================================================
   THEME: Dark / Navy
   ===================================================== */
:root[data-theme="dark"],
:root[data-theme="navy"] {
  --surface-canvas: var(--color-navy-800);
  --surface-canvas-secondary: var(--color-navy-700);
  --surface-canvas-muted: var(--color-navy-600);
  --surface-canvas-disabled: var(--color-navy-100);

  --surface-neutral: var(--color-ink-50);
  --surface-neutral-inverse: var(--color-navy-900);

  --surface-overlay: rgba(0, 0, 0, 0.72);
  --surface-overlay-active: rgba(255, 255, 255, 0.18);

  --text-default: var(--color-ink-50);
  --text-secondary: var(--color-ink-100);
  --text-muted: var(--color-ink-200);
  --text-disabled: var(--color-ink-400);

  --text-inverse: var(--color-navy-950);

  --icon-default: var(--color-ink-50);
  --icon-muted: var(--color-ink-200);
  --icon-inverse: var(--color-ink-950);

  --border-default: var(--border-width-4) solid var(--color-ink-50);

  --link-default: var(--color-sky-600);
  --link-hover: var(--color-sky-500);
  --link-active: var(--color-sky-400);

  --focus-ring: var(--color-navy-300);
}

/* =====================================================
   RESPONSIVE PAGE GUTTER
   The 128px gutter is a desktop value. Narrower viewports
   step down through existing spacing primitives so no
   section overflows a 375px phone.
   ===================================================== */
@media (max-width: 1023px) {
  :root {
    --space-page-inline: var(--spacing-64);
  }
}

@media (max-width: 640px) {
  :root {
    --space-page-inline: var(--spacing-24);
  }
}