/* 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-300);

  --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-yellow-500);
}

/* =====================================================
   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-orange-500);
}

/* =====================================================
   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);
}