/* Design tokens. Load AFTER reset.css, BEFORE components.css.
   choss — chalk · graphite · rust. Light + dark, both deliberate.
   Palette derived from the activity: warm off-white (chalk on paper),
   warm graphite ink, oxidised rust-orange signal. */

:root, [data-theme="light"] {
  /* ── Surfaces — warm off-white, never pure white ──────────── */
  --bg:        #F1EBDC;
  --bg-2:      #E8E0CD;
  --card:      #FAF6EA;
  --card-deep: #F1EBDC;
  --line:      #D8CFB6;
  --line-soft: #E2DAC4;

  /* ── Ink — warm graphite, not cold black ──────────────────── */
  --ink:       #1A1714;
  --ink-2:     #4A453E;
  --ink-3:     #8E867A;
  --ink-4:     #B5AC9B;

  /* ── Signal — oxidised rust-orange. The brand colour ──────── */
  --rust:      #B85C2E;
  --rust-deep: #8E4421;
  --rust-soft: #F3DBC4;
  --rust-tint: #FAEBD9;

  /* ── Cool accent — slate ──────────────────────────────────── */
  --slate:      #3D5160;
  --slate-soft: #DDE3E8;

  /* ── Result palette (brand semantics) ─────────────────────── */
  --r-flash:        #C68F32;  /* gold — first try */
  --r-flash-soft:   #F4E6C3;
  --r-send:         #3D5160;  /* slate — solid progress */
  --r-send-soft:    #DDE3E8;
  --r-repeat:       #8E867A;  /* ink-3 — done before */
  --r-repeat-soft:  #E2DAC4;
  --r-project:      #B85C2E;  /* rust — the active work */
  --r-project-soft: #F3DBC4;
}

[data-theme="dark"] {
  /* Surfaces — warm dark, slate at midnight */
  --bg:        #16140F;
  --bg-2:      #1C1914;
  --card:      #221E18;
  --card-deep: #1C1914;
  --line:      #322D22;
  --line-soft: #28241C;

  /* Ink — chalk text on graphite */
  --ink:       #ECE3CB;
  --ink-2:     #B0A88F;
  --ink-3:     #7A7361;
  --ink-4:     #4F4A3F;

  /* Signal — rust pushed brighter for legibility on dark */
  --rust:      #D9764A;
  --rust-deep: #C56638;
  --rust-soft: #3F2417;
  --rust-tint: #2A1A12;

  --slate:      #7A93A8;
  --slate-soft: #1F2830;

  --r-flash:        #DCA547;
  --r-flash-soft:   #2C2515;
  --r-send:         #7A93A8;
  --r-send-soft:    #1F2830;
  --r-repeat:       #7A7361;
  --r-repeat-soft:  #28241C;
  --r-project:      #D9764A;
  --r-project-soft: #3F2417;
}

/* ── Compatibility aliases ───────────────────────────────────────
   The existing components use the old accent vocabulary. Map it onto
   the result palette so every component reskins automatically; these
   resolve per-theme because they reference the cascading result tokens.
   Primary-action usages of --blue are repointed to --rust in components.css. */
:root {
  --amber:      var(--r-flash);
  --amber-soft: var(--r-flash-soft);
  --blue:       var(--r-send);
  --blue-soft:  var(--r-send-soft);
  --blue-deep:  var(--rust-deep);
  --red:        var(--r-project);
  --red-soft:   var(--r-project-soft);
  --green:      var(--r-send);
  --white:      #ffffff;
  --ink-overlay: rgba(0, 0, 0, 0.45);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-chip:   6px;
  --r-sm:     8px;
  --r-tile:  10px;
  --r-input: 12px;
  --r-card:  16px;
  --r-hero:  28px;
  --r-pill: 999px;

  /* ── Spacing ──────────────────────────────────────────────── */
  --pad-page: 24px;
  --pad-card: 16px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease:   cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 120ms var(--ease);
  --t-med:  220ms var(--ease);
  --t-slow: 380ms var(--ease);

  /* ── Organic hold motifs (pip masks) ──────────────────────── */
  --m-round: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4 C32 3 41 8 43 17 C45 26 41 37 32 42 C24 46 13 45 7 38 C2 32 2 21 5 14 C8 7 16 5 24 4 Z' fill='%23000'/%3E%3C/svg%3E");
  --m-elong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cpath d='M9 15 C6 10 14 7 26 6 C40 5 57 7 59 13 C61 19 52 23 38 24 C24 25 12 21 9 15 Z' fill='%23000'/%3E%3C/svg%3E");
  --m-point: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3 C27 5 30 11 38 31 C42 41 35 45 24 45 C13 45 6 42 10 32 C16 16 20 5 24 3 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ── Base ─────────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body { transition: background var(--t-med), color var(--t-med); }

body > header,
body > main {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

body > main { padding-block: 1.75rem; }

h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }

/* Eyebrow — mono caps used as section labels */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}

/* Mono data: grades, stats, timestamps */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Buttons ─────────────────────────────────────────────────── */

button, [role="button"], a[role="button"] {
  border-radius: var(--r-input);
  font-weight: 600;
  letter-spacing: -0.01em;
}