/* ============================================================
   MERIDIAN — tokens.css
   One page material, photographed at two times of day.
   Components read ONLY the semantic layer (--bg, --bg-raise,
   --tx-hi, --tx-mut, --line). Raw colors live here and nowhere else.
   ============================================================ */

/* ---- Self-hosted fonts (latin subsets) ---- */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Sora-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../fonts/JetBrainsMono-500.woff2') format('woff2'); }

:root {
  /* Navy ramp — dark surfaces = light-world ink */
  --navy-950: #0B1826;
  --navy-900: #11283F;
  --navy-800: #16324E;
  --navy-700: #1D3D5E;

  /* Paper ramp — cool, zero green tint */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAFBFC;
  --paper-100: #F4F6F8;

  /* Text — exactly two grays per world */
  --ink-hi:  #11283F;
  --ink-mut: #5B6B7A;
  --dust-hi: #F2F6F9;
  --dust-mut: #93A6B6;

  /* Signal — ONE green */
  --signal:      #61BD6B;
  --signal-deep: #4FA65A;
  --signal-08:   rgba(97, 189, 107, .08);
  --signal-35:   rgba(97, 189, 107, .35);

  /* Hairlines */
  --line-light: rgba(17, 40, 63, .10);
  --line-dark:  rgba(242, 246, 249, .09);

  /* Type */
  --font-display: 'Sora', -apple-system, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --t-display: clamp(40px, 5.2vw, 60px);
  --t-h2: clamp(32px, 3.6vw, 44px);
  --t-h3: 22px;
  --t-lede: 19px;
  --t-body: 17px;
  --t-small: 15px;

  /* Layout */
  --sect-major: 128px;
  --sect-minor: 88px;
  --container: 1240px;
  --gutter: 24px;
  --straddle: 280px;      /* how far the hero frame hangs into the light */
  --header-h: 72px;

  /* Radii — three, no more */
  --r-card: 12px;
  --r-el: 8px;
  --r-dot: 999px;

  /* Shadows — two, no more */
  --shadow-lift: 0 24px 64px -32px rgba(17, 40, 63, .28);
}

@media (max-width: 720px) {
  :root {
    --sect-major: 80px;
    --sect-minor: 56px;
    --straddle: 130px;
  }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* ---- Semantic layer ---- */
:root, [data-theme="light"] {
  --bg: var(--paper-50);
  --bg-raise: var(--paper-0);
  --tx-hi: var(--ink-hi);
  --tx-mut: var(--ink-mut);
  --line: var(--line-light);
  --focus: var(--navy-700);
}
[data-theme="dark"] {
  --bg: var(--navy-900);
  --bg-raise: var(--navy-800);
  --tx-hi: var(--dust-hi);
  --tx-mut: var(--dust-mut);
  --line: var(--line-dark);
  --focus: var(--signal);
}