/* ============================================================
   Unified design tokens — the single source of truth for the
   whole project (site shell + every widget iframe link this).

   Two naming dialects resolve to ONE palette:
     • warm-paper tokens  (--bg, --ink, --amber …) used by the
       full-flow widget and the site prose
     • Claude artifact tokens (--color-text-* …) that five of the
       widgets were authored against — remapped here so they
       render correctly outside the Claude web app.
   ============================================================ */
:root {
  color-scheme: light dark;

  /* warm-paper base palette */
  --bg:   #faf9f7;
  --card: #ffffff;
  --ink:  #1c1b19;
  --ink2: #5b5750;
  --ink3: #767167;
  --line: #e2ded7;
  --gray: #b8b2a8;    /* "reused / inactive" fill (e.g. KV-cache cells) */

  /* accents */
  --amber: #BA7517;   /* the "this is a matrix multiply" colour */
  --teal:  #38866d;
  --blue:  #4f79a3;

  /* type */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- artifact-compatibility tokens, mapped onto the palette ---- */
  --color-text-primary:        var(--ink);
  --color-text-secondary:      var(--ink2);
  --color-text-tertiary:       var(--ink3);
  --color-text-info:           var(--amber);

  --color-background-primary:   var(--card);
  --color-background-secondary: #f0ece6;
  --color-background-info:      rgba(186, 117, 23, 0.10);

  --color-border-tertiary: var(--line);
  --color-border-info:     var(--amber);

  --font-mono: var(--mono);
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #1a1916;
    --card: #221f1b;
    --ink:  #ece8e1;
    --ink2: #b3ada3;
    --ink3: #948d82;
    --line: #36322c;
    --gray: #4a463f;
    --teal: #5fb89b;
    --blue: #7ba6cd;

    --color-background-secondary: #2a2620;
  }
}