/* ============================================================================
   design-tokens.css — ExoHelix design system, derived from ~/claude_work/exohelix/DESIGN.md
   SHARED CONTRACT: the real Nassau trip page imports THIS file so tokens never drift.
   Served at /design-tokens.css on the Pages project. Fonts are self-hosted under /fonts/.
   ============================================================================ */

/* ---- Self-hosted fonts (no third-party origin; CSP font-src 'self') ---- */
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/eb-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/eb-garamond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/fonts/eb-garamond-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}

:root {
  /* ---- Palette (four-color system + derivatives) ---- */
  --off-white: #FBFBFA;
  --white: #FFFFFF;
  --graphite: #2C3947;
  --graphite-light: #3D4F5F;
  --helix-teal: #098A8F;
  --teal-light: #0AA3A9;
  --teal-dark: #077275;

  --text-primary: #2C3947;
  --text-secondary: #666F79;
  --text-tertiary: #979EA5;
  --text-quaternary: #ACB1B7;
  --text-inverse-primary: #FBFBFA;
  --text-inverse-secondary: #D2D4D6;
  --text-inverse-tertiary: #A8ADB2;
  --text-inverse-quaternary: #7E868E;

  --surface-base: #FBFBFA;
  --surface-raised: #FFFFFF;
  --surface-tinted: #F5F5F4;
  --surface-dark: #2C3947;
  --surface-accent: #098A8F;

  --hairline: rgba(44, 57, 71, 0.08);
  --hairline-solid: #2C3947;

  /* ---- Typography ---- */
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;

  /* Type scale (~1.250 major third, anchored at 1rem body) */
  --fs-display: 4.5rem;
  --fs-display-mobile: 3rem;
  --fs-h1: 3rem;
  --fs-h2: 3rem;
  --fs-h2-mobile: 2.25rem;
  --fs-h3: 1.875rem;
  --fs-h4: 1.5rem;
  --fs-body-large: 1.25rem;
  --fs-body: 1rem;
  --fs-body-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-eyebrow: 0.875rem;

  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.15em;

  /* ---- Radii ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* cards, modals */
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Spacing (linear scale — snap, never invent) ---- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 80px;
  --container-max: 1152px;
  --container-x: 24px;

  /* ---- Elevation ---- */
  --shadow-hairline: 0 0 0 1px rgba(44, 57, 71, 0.08);
  --shadow-raised: 0 10px 15px rgba(44,57,71,0.10), 0 4px 6px rgba(44,57,71,0.08);
}