/* ═══════════════════════════════════════════════════════════════════
   @jflamb/ledger · v0.1.0
   Design tokens for jflamb.com, assistant.jflamb.com, retirement.jflamb.com
   Source of truth: this repo. Spec: see README.
   Components consume ONLY layer-2 semantic tokens (--color-*, --font-*,
   --text-*, --space-*, --radius-*, --control-*, --focus-*, --shadow-*).
   Layer-1 primitives are theme-varying and private to this file.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── layer 1 · primitives (theme-varying) ─────────────────────── */
  --paper: #f6f3eb;
  --paper-raised: #fcfaf4;
  --ink: #182320;
  --ink-soft: #4c564f;
  --graphite: #666d63; /* small-text tertiary · >=4.5:1 on both papers */
  --faint: #878e86; /* decoration + disabled text ONLY */
  --rule: #c8cbc0; /* hairline dividers, static panel borders */
  --rule-strong: #7d857b; /* interactive borders · >=3:1 on both papers */
  --viridian: #1d5c46;
  --viridian-deep: #143f30;
  --viridian-wash: #e6efe8;
  --red: #a6301f;
  --red-wash: #f6e9e5;
  --amber: #8a5a12;
  --amber-wash: #f3ecdd;
  --blue: #40618d;
  --blue-wash: #e8edf4;

  /* ── layer 2 · semantics (theme-stable · components consume these) ── */
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--ink-soft);
  --color-text-tertiary: var(--graphite);
  --color-text-disabled: var(--faint);
  --color-text-on-action: var(--paper);
  --color-surface-page: var(--paper);
  --color-surface-panel: var(--paper-raised);
  --color-surface-selected: var(--viridian-wash);
  --color-border: var(--rule);
  --color-border-interactive: var(--rule-strong);
  --color-action: var(--viridian);
  --color-action-hover: var(--viridian-deep);
  --color-link: var(--viridian);
  --color-focus: var(--blue);
  --color-status-critical: var(--red);
  --color-status-critical-surface: var(--red-wash);
  --color-status-attention: var(--amber);
  --color-status-attention-surface: var(--amber-wash);
  --color-status-info: var(--blue);
  --color-status-info-surface: var(--blue-wash);
  --color-status-neutral: var(--ink-soft);
  --color-status-neutral-surface: var(--paper-raised);

  /* ── type roles ──────────────────────────────────────────────── */
  --font-prose: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --font-ui: system-ui, "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:
    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ── scales ──────────────────────────────────────────────────── */
  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.45rem;
  --text-2xl: 1.9rem;
  --text-hero: clamp(3rem, 9vw, 8.5rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── shape & interaction ─────────────────────────────────────── */
  --radius-static: 0; /* read, not operated */
  --radius-tag: 2px; /* status tags, badges, tooltips */
  --radius-control: 6px; /* buttons, inputs, segmented controls */
  --radius-selectable: 8px; /* selectable cards, alternative choosers */
  --radius-pill: 999px; /* filter chips (site-local, sparingly) */
  --control-min-block-size: 48px;
  --focus-ring: 2px solid var(--color-focus);
  --focus-ring-offset: 2px;
  --shadow-overlay: 0 8px 28px rgba(10, 18, 14, 0.18); /* overlays ONLY */
}

/* ── dark · system preference ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10150f;
    --paper-raised: #171d16;
    --ink: #e8e6d9;
    --ink-soft: #adb3a6;
    --graphite: #868d81;
    --faint: #6d746a;
    --rule: #333b31;
    --rule-strong: #6a7366;
    --viridian: #79c4a0;
    --viridian-deep: #a4dcc0;
    --viridian-wash: #1c2b22;
    --red: #e08268;
    --red-wash: #2e1c16;
    --amber: #d3a355;
    --amber-wash: #2b2312;
    --blue: #8aa8cf;
    --blue-wash: #171f2b;
    --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

/* ── manual theme · beats the media query ─────────────────────── */
:root[data-theme="dark"] {
  --paper: #10150f;
  --paper-raised: #171d16;
  --ink: #e8e6d9;
  --ink-soft: #adb3a6;
  --graphite: #868d81;
  --faint: #6d746a;
  --rule: #333b31;
  --rule-strong: #6a7366;
  --viridian: #79c4a0;
  --viridian-deep: #a4dcc0;
  --viridian-wash: #1c2b22;
  --red: #e08268;
  --red-wash: #2e1c16;
  --amber: #d3a355;
  --amber-wash: #2b2312;
  --blue: #8aa8cf;
  --blue-wash: #171f2b;
  --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] {
  --paper: #f6f3eb;
  --paper-raised: #fcfaf4;
  --ink: #182320;
  --ink-soft: #4c564f;
  --graphite: #666d63;
  --faint: #878e86;
  --rule: #c8cbc0;
  --rule-strong: #7d857b;
  --viridian: #1d5c46;
  --viridian-deep: #143f30;
  --viridian-wash: #e6efe8;
  --red: #a6301f;
  --red-wash: #f6e9e5;
  --amber: #8a5a12;
  --amber-wash: #f3ecdd;
  --blue: #40618d;
  --blue-wash: #e8edf4;
  --shadow-overlay: 0 8px 28px rgba(10, 18, 14, 0.18);
}

/* ── high contrast · system-level (promoted from jflamb.com) ──── */
@media (prefers-contrast: more) {
  :root {
    --paper: #ffffff;
    --paper-raised: #ffffff;
    --ink: #081214;
    --ink-soft: #1c2a26;
    --graphite: #2e3a35;
    --rule: #081214;
    --rule-strong: #081214;
    --viridian: #143f30;
    --viridian-deep: #0c2a1f;
  }
}

/* ── print ────────────────────────────────────────────────────── */
@media print {
  :root {
    --paper: #ffffff;
    --paper-raised: #ffffff;
    --ink: #000000;
    --shadow-overlay: none;
  }
}