/* Design tokens. A Swiss-technical system: a neutral grotesk for prose,
   monospace for code/identifiers, soft corners, hairline rules, generous
   whitespace. The monochrome base carries structure; two accents carry brand —
   Clojure's blue (--accent, for text and interactive elements) and green
   (--accent-2, for decorative fills) — a nod to the language the notebooks run.
   State colours (danger, success) remain independent.

   Theming follows the OS: light is the default, and the dark palette
   applies whenever prefers-color-scheme asks for it. There is no manual
   override — one less piece of chrome, and the rendered Clay notebook
   (an iframe) tracks the same OS preference (see proxy/fix-clay-reload). */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-raised: #f6f5f2;
  --bg-sunken: #efede8;
  --fg: #16161a;
  --fg-muted: #6a6a73;
  --fg-subtle: #9a9aa3;
  --border: #e3e3e0;
  --border-strong: #16161a;

  /* Accent — Clojure's blue and green. Blue (--accent) is the text/interactive
     accent: links, primary actions, eyebrow labels, focus rings — dark enough
     to carry text. Green (--accent-2) is the decorative-fill accent, used where
     it's a block of colour, not text: the wordmark glyph, the eyebrow rule, the
     usage bar, the spinner. Red stays independent for delete. */
  --accent: #4670cc;
  --accent-hover: #3f66c9;
  --accent-fg: #ffffff;
  --accent-bg: #eaeefb;
  --accent-border: #4670cc;
  --accent-soft: #dce3f7;
  --accent-2: #63b132;

  /* State — independent of the accent. */
  --danger: #b3261e;
  --danger-bg: #fbeceb;
  --success: #1a7f37;
  --success-bg: #e9f3eb;

  --font-sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Measures: one container width (rem), shared by the header, main, and
     footer so they stay edge-aligned. */
  --measure: 60rem;

  --radius: 8px;
  --radius-sm: 4px;
  --hairline: 1px;

  /* A soft, low shadow for surfaces that sit on the page background (cards,
     the framed preview). Barely there in dark mode, where the border carries
     the edge instead — kept subtle so it never reads as Material. */
  --shadow: 0 2px 12px -6px rgba(20, 20, 26, 0.10);

  /* Spacing — a 4px grid. Each step is a clean rem value; the early
     steps add 4px each, then the ratio opens up for section-level
     whitespace. Every dimension in the UI should draw from this scale. */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px — base */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 10rem;   /* 160px */

  /* Icon size — feature/hero icons, on the spacing grid. */
  --size-icon-lg: 1.5rem;  /* 24px */

  /* Spinner — matches --size-icon-lg so loading glyphs read at the same
     visual weight as a feature icon. */
  --size-spinner: 1.5rem;

  /* Major-third type scale (1.250). */
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  /* Motion — two speeds only. Fast for state changes (hover, focus);
     slow for layout transitions (fades, collapses). */
  --transition-fast: 0.15s ease;
  --transition-slow: 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #0d0d0f;
    --bg-raised: #18181b;
    --bg-sunken: #08080a;
    --fg: #ededf0;
    --fg-muted: #8a8a93;
    --fg-subtle: #5e5e68;
    --border: #2a2a30;
    --border-strong: #ededf0;

    --accent: #90b4fe;
    --accent-hover: #abc8ff;
    --accent-fg: #0a1224;
    --accent-bg: #16213e;
    --accent-border: #90b4fe;
    --accent-soft: #161e32;
    --accent-2: #91dc47;

    --danger: #ff6b61;
    --danger-bg: #2a1411;
    --success: #4ac26b;
    --success-bg: #11251a;

    --shadow: 0 2px 12px -6px rgba(0, 0, 0, 0.5);
  }
}