/* DropSet design tokens — the SINGLE source of truth for the whole public site.
 *
 * The landing page and the generated /guide + /programs pages BOTH link this
 * file, so colours, fonts and metrics are defined once and stay in lockstep.
 * Change a colour here and it moves everywhere — never edit palette values in
 * index.html or programs.css again.
 *
 * Note: the two page families still use different component class names
 * (.nav vs .pp-nav etc.), so component CSS lives with each page — but they all
 * read THESE tokens, which is where every drift used to come from. */

:root {
  /* Light theme (default) */
  --paper:   #EDEEE8;
  --paper-2: #E4E6DD;
  --paper-3: #D8DBCF;
  --ink:     #16180F;
  --ink-2:   #4A4E42;
  --ink-3:   #767B6B;
  --rule:    #C6CABA;
  --logo:    #22C55E;   /* DS mark — the app's started-program green (moved off neon lime) */
  --green:   #22C55E;   /* active / positive signal — matches My Programs' active card */
  --lime:    #5B7BA6;   /* accent — restrained steel-blue (borders/hovers) */
  --rust:    #A6431E;   /* errors / warnings */
  --slab:    #14160F;
  --slab-2:  #23261B;

  /* Subpage-era alias: programs.css/guide.css reference --accent, --muted*,
     --surface*, --border, --bg, --text. Map them onto the same palette so both
     naming conventions resolve to one set of values. */
  --accent: var(--lime);
  --accent-dim: rgba(91,123,166,0.12);
  --bg: var(--paper);
  --text: var(--ink);
  --muted: var(--ink-3);
  --muted2: var(--ink-2);
  --surface: var(--paper-2);
  --surface2: var(--paper-3);
  --surface-hover: var(--paper-3);
  --border: var(--rule);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: var(--sans);   /* body is sans — the serif read poorly on screens */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1120px;
  --radius: 10px;
  --banner-h: 44px;
}

/* Dark theme — black ground (final). Neutral near-black, no colour cast. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0A0A0B; --paper-2: #141416; --paper-3: #1D1D20;
    --ink: #ECECEE; --ink-2: #9B9BA1; --ink-3: #6C6C72;
    --rule: #2A2A2E; --rust: #E8804F; --slab: #070708; --slab-2: #141416;
    --surface-hover: #242428;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0A0B; --paper-2: #141416; --paper-3: #1D1D20;
  --ink: #ECECEE; --ink-2: #9B9BA1; --ink-3: #6C6C72;
  --rule: #2A2A2E; --rust: #E8804F; --slab: #070708; --slab-2: #141416;
  --surface-hover: #242428;
}
:root[data-theme="light"] {
  --paper: #EDEEE8; --paper-2: #E4E6DD; --paper-3: #D8DBCF;
  --ink: #16180F; --ink-2: #4A4E42; --ink-3: #767B6B;
  --rule: #C6CABA; --rust: #A6431E; --slab: #14160F; --slab-2: #23261B;
  --surface-hover: #D8DBCF;
}
