/* ============================================================
   Healthy Rewards — design tokens (editorial system)
   Original palette. L.A. Care brand blue retained on chrome only.
   ============================================================ */

:root {
  /* Ink scale — cool, slightly warmed off pure black */
  --ink-950: #0B1424;
  --ink-900: #111C30;
  --ink-800: #18253D;
  --ink-700: #233452;
  --ink-600: #334766;
  --ink-500: #4D6182;
  --ink-400: #6B7C98;
  --ink-300: #95A5BE;
  --ink-200: #C6D0E0;
  --ink-100: #E6EBF2;

  /* Paper scale — warm cream, slightly cooler to match reference */
  --paper:    #F4EFE2;
  --paper-2:  #EAE3D0;
  --paper-3:  #DED6BF;
  --rule:     #CFC7AC;
  --rule-light: #DFD9C3;

  /* Single accent — deep teal-green (continuity with reference site) */
  --accent:    #0D6F66;
  --accent-2:  #0E4F4C;
  --accent-bg: #CFE2DD;

  /* Data hues */
  --amber:     #B26A1A;
  --amber-bg:  #F1E2C7;
  --crimson:   #944236;
  --crimson-bg:#ECD3CD;
  --emerald:   #2F6E54;
  --emerald-bg:#D4E2D8;

  /* L.A. Care brand chrome — retained per spec, used only on top header lockups */
  --plan-primary: #034695;
  --plan-primary-ink: #FFFFFF;

  /* Type families */
  --serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --sans:  "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing rhythm (4-base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 56px; --s-11: 64px; --s-12: 80px;

  /* Radii — almost nothing rounds */
  --r-1: 2px;  --r-2: 3px;  --r-pill: 999px;

  /* Motion */
  --t-fast: 120ms;
  --t-med:  200ms;
  --t-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* Compatibility shims for legacy class hooks in chw/loop/index */
  --color-bg: var(--paper);
  --color-fg: var(--ink-950);
  --color-mute: var(--ink-500);
  --color-border: var(--rule);
  --color-card: var(--paper-2);
  --color-primary: var(--plan-primary);
  --color-accent: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-med:  0.01ms;
    --t-slow: 0.01ms;
  }
}