/* mikesand.ai design tokens (v1 direction, mockup)
   Layout concept: one reading column on warm paper, with evidence set apart in mono and red pencil.
   Decisions: msai-E5 E5g (trial) Schibsted Grotesk + JetBrains Mono; msai-E6 E6a (provisional) warm paper + proofreader's red;
   msai-E10 all sans. Production self-hosts the font files (no third-party requests); the mockup loads them from Google Fonts. */

:root {
  /* Color, light. Contrast on --paper: ink 15.7:1, ink-2 10.8:1, muted 6.3:1, red 5.9:1.
     On --wash: muted 5.8, red 5.4. On --sheet: ink 17.1, muted 6.8. All pass WCAG AA for body text. */
  --paper:   #F7F3EA;  /* page ground */
  --wash:    #EFE9DC;  /* summary boxes, placeholders */
  --sheet:   #FFFDF8;  /* primary-document frame */
  --ink:     #1B1A17;  /* text, rules that carry weight */
  --ink-2:   #3A362F;  /* dek, secondary text */
  --muted:   #5E594F;  /* meta, captions */
  --rule:    #D9D1C1;  /* hairlines */
  --red:     #B3261E;  /* proofreader's red: kickers, dates, link underlines. Never on buttons or error states. */
  --focus:   #1B1A17;

  /* Type */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (rem at 16px root; body is set to --step-0) */
  --step--1: 0.8125rem;  /* 13px  mono meta, kickers */
  --step-0:  1.0625rem;  /* 17px  body, phone */
  --step-1:  1.1875rem;  /* 19px  body, desktop; small heads */
  --step-2:  1.375rem;   /* 22px  card titles, dek on phone */
  --step-3:  1.75rem;    /* 28px  section heads */
  --step-4:  2.25rem;    /* 36px  page titles */
  --step-hed: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem); /* home hed: 34px phone to 56px desktop */

  --measure: 68ch;
  --wide: 72rem;         /* 1152px content max */

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: clamp(1rem, 0.5rem + 3vw, 5rem); /* 16px at 375px */

  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark is warm, not inverted. On --paper: ink 14.1, ink-2 11.6, muted 6.9, red 7.3.
       On --wash: muted 6.2, red 6.6. On --sheet: ink 13.2, muted 6.4. */
    --paper: #1A1916; --wash: #24221E; --sheet: #211F1B;
    --ink: #ECE6D8; --ink-2: #D8D1C2; --muted: #A9A192; --rule: #3A362E;
    --red: #F28B7D; --focus: #ECE6D8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1A1916; --wash: #24221E; --sheet: #211F1B;
  --ink: #ECE6D8; --ink-2: #D8D1C2; --muted: #A9A192; --rule: #3A362E;
  --red: #F28B7D; --focus: #ECE6D8;
  color-scheme: dark;
}