/* Design tokens. Warm paper, white raised cards, one muted slate-blue accent.
   Fonts are loaded by the page (materials shell: <link> in templates/shell.html;
   standalone files: @import in standalone.css), not here. */

:root {
  color-scheme: light dark;

  /* Fonts */
  --font-prose: "Literata", Charter, "Iowan Old Style", Georgia, serif;
  --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. The root font size is 17px (106.25%), so 1rem is the 17px body. */
  --text-base: 1rem;
  --text-sm: 0.92rem;
  --text-xs: 0.8rem;
  --text-code: 0.88em;
  --text-h1: 2.1rem;
  --text-h2: 1.55rem;
  --text-h3: 1.25rem;
  --text-h4: 1.07rem;
  --leading-body: 1.65;
  --leading-heading: 1.25;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii: cards 1rem, callouts and panels 0.75rem, small controls 0.6rem, code 0.4rem */
  --radius-card: 1rem;
  --radius-panel: 0.75rem;
  --radius: 0.6rem;
  --radius-code: 0.4rem;

  /* Layout */
  /* Measures are in rem, not ch: ch resolves against each element's own font, so a
     65ch h1 or UI-font lede would be wider than the body text. The column grows with
     the screen (user preference): 44rem on small laptops, 60vw in between, 64rem cap. Tables, code,
     figures and cards share the same width so the column edge stays uniform. */
  --measure: clamp(44rem, 60vw, 64rem);
  --measure-wide: var(--measure);
  --sidebar-width: 290px;
  --topbar-height: 3.5rem;
  --gutter: 16px;
  --tap: 2.75rem;

  /* Colours: light. Contrast on --bg: fg 14.4:1, muted 5.4:1, accent 6.4:1, warn 4.6:1. */
  --bg: #fbfbfa;
  --surface: #ffffff;
  --subtle: #f2f2f0;
  --border: #e5e4e1;
  --fg: #26221f;
  --muted: #63605c;
  --accent: #3f5b78;
  --warn: #9a6410;
  --backdrop: rgba(38, 34, 31, 0.4);
  --shadow-card: 0 1px 2px rgb(30 30 30 / 0.05), 0 6px 20px -6px rgb(30 30 30 / 0.1);
  --shadow-lift: 0 1px 2px rgb(30 30 30 / 0.06), 0 10px 26px -6px rgb(30 30 30 / 0.16);
  --shadow-float: 0 8px 30px -8px rgb(30 30 30 / 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Contrast on --bg: fg 14.5:1, muted 7.4:1, accent 8.6:1, warn 9.1:1. */
    --bg: #1b1815;
    --surface: #25211d;
    --subtle: #2e2924;
    --border: #3a332d;
    --fg: #efe8de;
    --muted: #b0a69a;
    --accent: #9db8d6;
    --warn: #e2b35c;
    --backdrop: rgba(0, 0, 0, 0.55);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.4);
    --shadow-float: 0 8px 30px -8px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1815;
  --surface: #25211d;
  --subtle: #2e2924;
  --border: #3a332d;
  --fg: #efe8de;
  --muted: #b0a69a;
  --accent: #9db8d6;
  --warn: #e2b35c;
  --backdrop: rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.4);
  --shadow-float: 0 8px 30px -8px rgb(0 0 0 / 0.6);
}

:root[data-theme="light"] {
  color-scheme: light;
}