/*
 * tokens.css — the semantic token authority (Soft Focus, ADR 0011).
 *
 * This file is the single home for color, type, space, radius, shadow and
 * motion values. No raw colors or font stacks may live in ui.css, views, or
 * anywhere else — components consume these custom properties only.
 *
 * Themes: Limestone (light, warm oat) is the default; Slate (dark, warm
 * taupe/graphite) applies from the system preference, or explicitly via a
 * [data-theme] attribute. The theme selectors are plain attribute selectors
 * (not :root-only), so any subtree can be themed — that is how /styleguide
 * renders both themes side by side. No pure #000/#fff; neutrals are tinted warm.
 */

/* ---- Theme: Limestone (light) — default, and explicit on any subtree ---- */
:root,
[data-theme="limestone"] {
  color-scheme: light;

  --bg: #f3eee4;
  --bg-glow: rgb(255 253 248 / 65%);
  --surface: #fbf8f1;
  --surface-2: #f5f0e6;
  --ink: #3b362e;
  --ink-soft: #6c6457;
  --ink-mute: #6f6757;
  --hairline: #e7dfd1;
  --field-border: #8f846c;
  --ring-track: #e7dfd1;

  /* Accent + kept-positive: muted sage */
  --sage: #7e9585;
  --sage-strong: #4f6b58;
  --sage-tint: #e9eee6;

  /* Gentle caution + rest: soft clay (never alarming, never red) */
  --clay: #be8e76;
  --clay-strong: #8a5c46;
  --clay-tint: #f2e6dc;
  --accent-solid: #4f6b58;
  --on-accent: #fbfaf6;
  --focus: #4f6b58;
  --shadow-sm: 0 1px 2px rgb(59 54 46 / 5%);
  --shadow-lg: 0 2px 6px rgb(59 54 46 / 4%), 0 16px 40px rgb(59 54 46 / 7%);
  --shadow-dock: 0 8px 30px rgb(59 54 46 / 12%);
  --shadow-accent: 0 6px 16px rgb(79 107 88 / 22%);
}

/* ---- Theme: Slate (dark) — system preference, unless forced Limestone ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="limestone"]) {
    color-scheme: dark;

    --bg: #26221a;
    --bg-glow: rgb(166 192 172 / 5%);
    --surface: #302a21;
    --surface-2: #383126;
    --ink: #ece4d5;
    --ink-soft: #bbb0a0;
    --ink-mute: #9c9280;
    --hairline: #3f3729;
    --field-border: #8e8472;
    --ring-track: #3f3729;
    --sage: #a6c0ac;
    --sage-strong: #bcd3c1;
    --sage-tint: #313a31;
    --clay: #d2a183;
    --clay-strong: #e0b597;
    --clay-tint: #3c2f26;
    --accent-solid: #a6c0ac;
    --on-accent: #23201a;
    --focus: #a6c0ac;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 25%);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 22%), 0 18px 44px rgb(0 0 0 / 30%);
    --shadow-dock: 0 10px 34px rgb(0 0 0 / 40%);
    --shadow-accent: 0 8px 22px rgb(0 0 0 / 38%);
  }
}

/* ---- Theme: Slate (dark) — explicit on :root or any subtree ---- */
[data-theme="slate"] {
  color-scheme: dark;

  --bg: #26221a;
  --bg-glow: rgb(166 192 172 / 5%);
  --surface: #302a21;
  --surface-2: #383126;
  --ink: #ece4d5;
  --ink-soft: #bbb0a0;
  --ink-mute: #9c9280;
  --hairline: #3f3729;
  --field-border: #8e8472;
  --ring-track: #3f3729;
  --sage: #a6c0ac;
  --sage-strong: #bcd3c1;
  --sage-tint: #313a31;
  --clay: #d2a183;
  --clay-strong: #e0b597;
  --clay-tint: #3c2f26;
  --accent-solid: #a6c0ac;
  --on-accent: #23201a;
  --focus: #a6c0ac;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 25%);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 22%), 0 18px 44px rgb(0 0 0 / 30%);
  --shadow-dock: 0 10px 34px rgb(0 0 0 / 40%);
  --shadow-accent: 0 8px 22px rgb(0 0 0 / 38%);
}

/* ---- Theme-independent tokens: type, space, radius, motion, layout ---- */
:root {
  /* Geometric-humanist sans, system/self-hosted only (no CDN, no display
     serif — ADR 0011). Weight comes from color, numerals and spacing. */
  --font-sans:
    "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", helvetica, arial, sans-serif;

  /* Type scale */
  --fs-eyebrow: 0.6875rem;
  --fs-caption: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 0.9375rem;
  --fs-body-lg: 1rem;
  --fs-title: 1.3125rem;
  --fs-heading: 1.5rem;
  --fs-display: clamp(1.6875rem, 6vw, 2rem);
  --fs-hero: clamp(2.5rem, 12vw, 3.25rem);
  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --ls-caps: 0.12em;
  --ls-tight: -0.01em;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Motion */
  --dur: 200ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --shell-max: 462px;
  --tap-min: 44px;
}