/* ============ TOKENS ============ */
:root{
  --paper: #F7F6F2;
  --paper-alt: #FFFFFF;
  --ink: #16171B;
  --ink-soft: #24262C;
  --muted: #54575F;
  --line: #E1DFD6;
  --accent: #1F5B49;
  --accent-strong: #163F34;
  --accent-on-dark: #5FD3A7;
  --on-accent: #F7F6F2;

  /* surfaces derived from the tokens above — kept as variables so
     dark mode can restate them without touching the rules that use them */
  --nav-bg: rgba(247, 246, 242, 0.82);
  --surface-alt: rgba(255, 255, 255, 0.88);
  --footer-bg: rgba(247, 246, 242, 0.92);
  --now-bg: rgba(22, 23, 27, 0.92);
  /* fixed light value for text that always sits on the permanently-dark
     "Now" panel, independent of theme */
  --cream: #F7F6F2;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --max: 1120px;
  --pad: clamp(1.5rem, 5vw, 4rem);

  color-scheme: light;
}

/* ============ DARK THEME ============
   Same tokens, translated: warm near-black instead of near-white paper,
   a brighter mint-leaning green (closer to --accent-on-dark) so it still
   reads on dark surfaces, and softened neutrals for borders/secondary text. */
:root[data-theme="dark"]{
  --paper: #14161A;
  --paper-alt: #1B1E23;
  --ink: #ECEAE4;
  --ink-soft: #CFCDC7;
  --muted: #9B9EA6;
  --line: #2A2D33;
  --accent: #3FAF87;
  --accent-strong: #58D9A8;
  --accent-on-dark: #5FD3A7;
  --on-accent: #0E1B16;

  --nav-bg: rgba(16, 18, 22, 0.82);
  --surface-alt: rgba(27, 30, 35, 0.88);
  --footer-bg: rgba(16, 18, 22, 0.92);
  --now-bg: rgba(34, 37, 42, 0.92);

  color-scheme: dark;
}