frontend/src/styles/tokens.css

:root {
  color-scheme: light;

  /* —— Base surfaces (Refined Warm, built on the original #ebe7e0) —— */
  --bg: #ebe7e0;
  --bg-elevated: #f1ede6;
  --card: #ffffff;            /* crisp white surfaces */
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-secondary: #f6f3ed;
  --ink: #2b2a26;             /* near-black warm ink */

  /* —— Text —— */
  --text: #2b2a26;
  --text-secondary: #5c574f;
  --text-tertiary: #8b8579;
  --separator: rgba(43, 42, 38, 0.08);

  /* —— Accent: clay (replaces the old gold #e8a317) —— */
  --accent: #9b6b43;
  --accent-ink: #6e4a2e;
  --accent-soft: rgba(155, 107, 67, 0.16);
  --accent-tint: #e8d9c9;     /* opaque clay tint for solid fills */
  --accent-fill: #f3e8da;     /* softest clay wash */

  /* —— Result states (paired hue + tint, retuned to sit with clay) —— */
  --ok: #4f7a5c;              /* sage */
  --ok-bg: #e3ede6;
  --warn: #b07e2f;            /* amber */
  --warn-bg: #f3e8d2;
  --danger: #a8523e;          /* clay-red */
  --danger-bg: #f2e0da;
  --pending-bg: #f3e8da;
  --pending-border: #9b6b43;

  /* —— Layering —— */
  --scrim: rgba(43, 42, 38, 0.42);

  /* —— Shadows: 3 soft tiers —— */
  --shadow: 0 8px 28px rgba(43, 42, 38, 0.10), 0 2px 6px rgba(43, 42, 38, 0.05);
  --shadow-1: 0 1px 2px rgba(43, 42, 38, 0.05);
  --shadow-2: 0 4px 16px rgba(43, 42, 38, 0.06), 0 1px 3px rgba(43, 42, 38, 0.04);
  --shadow-3: 0 8px 28px rgba(43, 42, 38, 0.10), 0 2px 6px rgba(43, 42, 38, 0.05);

  /* —— Geometry —— */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --pad: 1.25rem;
  --hit: 44px;
  --btn-h: 52px;
  --fab-size: 58px;
  --tab-h: 72px;

  /* —— Type scale —— */
  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-section: 17px;
  --fs-body: 15px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  /* —— Spacing scale (4px base) —— */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font: 400 16px/1.47 var(--font);
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

@media (prefers-contrast: more) {
  :root {
    --separator: rgba(32, 32, 32, 0.28);
    --text-secondary: #444444;
    --shadow: none;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }
}