/* ========================================================================
   TŌDAI — Design Tokens
   Single source of truth for color, type, spacing, radii, shadows, motion.
   ======================================================================== */

:root {
  /* ---------- Brand Palette ---------- */
  --c-ocean: #0B7C8C;
  --c-ocean-50:  #EAF6F8;
  --c-ocean-100: #D2ECEF;
  --c-ocean-200: #A7D9DF;
  --c-ocean-300: #6FBDC8;
  --c-ocean-400: #389FAE;
  --c-ocean-500: #0B7C8C;   /* primary */
  --c-ocean-600: #086574;
  --c-ocean-700: #064E5A;
  --c-ocean-800: #053C46;
  --c-ocean-900: #032830;

  --c-navy: #0D1B3D;
  --c-navy-50:  #EBEDF3;
  --c-navy-100: #CFD3E0;
  --c-navy-200: #9099B5;
  --c-navy-300: #5A6588;
  --c-navy-400: #2E3A60;
  --c-navy-500: #0D1B3D;   /* primary dark */
  --c-navy-600: #0A1632;
  --c-navy-700: #081127;
  --c-navy-800: #060D1D;
  --c-navy-900: #030711;

  --c-mist:   #F5F7F8;
  --c-white:  #FFFFFF;

  /* Secondary */
  --c-arctic: #DCEFF2;
  --c-sage:   #D8E5DD;
  --c-sand:   #E9DFD1;
  --c-coral:  #F26B5E;

  /* Neutrals (cool, mist-aligned) */
  --c-line:       #E4E8EB;
  --c-line-soft:  #EDF0F2;
  --c-text:       #0D1B3D;       /* navy */
  --c-text-2:     #3D4866;
  --c-text-3:     #6B7691;
  --c-text-4:     #9CA4BA;
  --c-bg:         #FFFFFF;
  --c-bg-soft:    #F5F7F8;
  --c-bg-sunken:  #EEF2F4;

  /* Semantic */
  --c-success: #2E8A6B;
  --c-warning: #C58A2C;
  --c-error:   #C24A3F;
  --c-info:    var(--c-ocean-500);

  /* Accent (mutable via Tweaks) */
  --c-accent:     var(--c-ocean);
  --c-accent-ink: #FFFFFF;
  --c-accent-soft:#EAF6F8;

  /* ---------- Typography ---------- */
  --font-sans:  'Satoshi', 'Inter', 'Ubuntu', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — fluid, but stable on desktop */
  --t-display: clamp(48px, 6vw, 88px);
  --t-h1:      clamp(36px, 4.4vw, 60px);
  --t-h2:      clamp(28px, 3vw, 40px);
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tr-tight:   -0.02em;
  --tr-normal:  -0.01em;
  --tr-wide:     0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;
  --s-20:80px;
  --s-24:96px;
  --s-32:128px;

  /* Density multiplier (Tweaks) */
  --density: 1;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, brand-calm) ---------- */
  --sh-1: 0 1px 2px rgba(13, 27, 61, 0.04), 0 1px 1px rgba(13, 27, 61, 0.03);
  --sh-2: 0 4px 10px -2px rgba(13, 27, 61, 0.06), 0 2px 4px -2px rgba(13, 27, 61, 0.04);
  --sh-3: 0 12px 28px -8px rgba(13, 27, 61, 0.10), 0 4px 10px -4px rgba(13, 27, 61, 0.05);
  --sh-focus: 0 0 0 3px rgba(11, 124, 140, 0.28);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   420ms;

  /* ---------- Grid ---------- */
  --content-max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ========================================================================
   Base
   ======================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--c-text);
  background: var(--c-bg);
  font-feature-settings: 'ss01', 'cv01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--c-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button { font: inherit; color: inherit; }

::selection { background: var(--c-ocean-200); color: var(--c-navy); }

:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

/* ========================================================================
   Typography utilities
   ======================================================================== */
.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.h1 { font-weight: 700; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.h2 { font-weight: 500; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-normal); }
.h3 { font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-normal); }
.h4 { font-weight: 600; font-size: var(--t-h4); line-height: var(--lh-snug); }

.editorial {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.body  { font-size: var(--t-body);  line-height: var(--lh-relaxed); color: var(--c-text-2); }
.small { font-size: var(--t-small); line-height: var(--lh-relaxed); color: var(--c-text-3); }
.mono  { font-family: var(--font-mono); font-size: 13px; }

.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-text-2);
  text-wrap: pretty;
  max-width: 60ch;
}