/* ============================================================
   recosta — design tokens (the living canon, with /styleguide)
   Semantic custom properties only. Every component consumes these
   names, never a raw color or font stack. Two themes ship together:
   crema (light, the default) and tostado (dark). Promoted from the
   "Barra" prototype — see .impeccable.md and ADR 0008.
   Warm neutrals throughout: no pure #000 / #fff anywhere.
   ============================================================ */

:root {
  /* Theme-agnostic tokens (shared by crema and tostado) */
  --font-sans: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --radius-card: 22px;
  --radius-panel: 16px;
  --radius-field: 12px;
  --radius-sm: 8px;
  --radius-tag: 6px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --tap-target: 44px;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 500ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* crema — light theme (default) */
  --bg: #f4ece0;
  --surface: #fdf8f1;
  --surface-sunken: #f2e7d6;
  --track: #e6d8c3;
  --ink: #2c2119;
  --ink-soft: #4a3a2c;
  --muted: #736149;

  /* base = fills, graphics, big numbers; -strong = small colored text
     (kept dark enough for AA 4.5:1 on surface, bg, and its -soft fill);
     -soft = subtle tinted background. */
  --accent: #c98a3c;
  --accent-strong: #94601e;
  --accent-soft: #f9ebd5;
  --on-accent: #241a10;
  --positive: #3f7d5a;
  --positive-strong: #356b4c;
  --positive-soft: #dcecdf;
  --warning: #b5533f;
  --warning-strong: #9c4433;
  --warning-soft: #f6ddd3;
  --line: #e3d5c0;
  --line-soft: #efe4d3;
  --focus: #94601e;
  --shadow: 0 1px 2px rgb(64 42 20 / 6%), 0 8px 24px rgb(64 42 20 / 8%);
  --shadow-sm: 0 1px 2px rgb(64 42 20 / 7%);
}

:root[data-theme="tostado"] {
  /* tostado — dark theme */
  --bg: #1a1510;
  --surface: #241d16;
  --surface-sunken: #2f2619;
  --track: #3b3022;
  --ink: #f2e7d5;
  --ink-soft: #ddceb8;
  --muted: #a9967d;
  --accent: #e2a95d;
  --accent-strong: #eeb96f;
  --accent-soft: #3a2c18;
  --on-accent: #201811;
  --positive: #6fbf90;
  --positive-strong: #6fbf90;
  --positive-soft: #24352a;
  --warning: #e08a70;
  --warning-strong: #e08a70;
  --warning-soft: #3a251d;
  --line: #3b3022;
  --line-soft: #322819;
  --focus: #e2a95d;
  --shadow: 0 1px 2px rgb(20 12 6 / 50%), 0 10px 30px rgb(20 12 6 / 55%);
  --shadow-sm: 0 1px 2px rgb(20 12 6 / 50%);
}