/* ============================================================
   Roni's Health Tracker — Design Tokens
   Single source of visual truth (docs/DESIGN_SYSTEM.md).
   Themes: light / dark / system (dark is the launch default).
   View styles reference ONLY these tokens.
   ============================================================ */

:root {
  /* ---- Light theme (warm, bright, elegant) ---- */
  --bg: #FBF7F4;
  --surface: #FFFFFF;
  --surface-soft: #F6EFF2;
  --text: #3A3241;
  --text-soft: #6E6176;
  --heading: #4C3563;
  --accent: #8A5A83;
  --accent-soft: #B886AE;
  --lavender: #A48BC4;
  --rose: #C97B96;
  --pink-soft: #F2D9E0;
  --success: #5E9276;
  --warn: #B58A4C;
  --note: #7A6FA8;
  --border: #E9DDE4;
  --focus: #6C4BA6;
  --shadow: 0 8px 24px rgba(76, 53, 99, .08);
  --shadow-lift: 0 16px 40px rgba(76, 53, 99, .14);
  --backdrop: rgba(36, 29, 43, .45);

  /* ---- Typography ---- */
  --serif: "Didot", "Cormorant Garamond", Georgia, serif;
  --sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Geometry ---- */
  --r-card: 20px;
  --r-control: 12px;
  --r-chip: 999px;
  --pad-card: 22px 24px;
  --gap: 20px;

  /* ---- Motion ---- */
  --t-fast: 150ms ease;
  --t-med: 220ms ease;
}

:root[data-theme="dark"] {
  /* ---- Dark theme (deep charcoal-plum + lavender/rose) ---- */
  --bg: #241D2B;
  --surface: #2F2738;
  --surface-soft: #3A3145;
  --text: #F0E8F0;
  --text-soft: #B3A6BD;
  --heading: #E5D4F0;
  --accent: #C79BC4;
  --accent-soft: #D9B7D6;
  --lavender: #B79FE0;
  --rose: #E39BB4;
  --pink-soft: #4A3A48;
  --success: #8CC3A5;
  --warn: #D4AC77;
  --note: #B9AFE8;
  --border: #463B52;
  --focus: #C7A8F0;
  --shadow: 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lift: 0 16px 40px rgba(0, 0, 0, .4);
  --backdrop: rgba(12, 9, 16, .6);
}

/* System mode follows the OS appearance */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #241D2B;
    --surface: #2F2738;
    --surface-soft: #3A3145;
    --text: #F0E8F0;
    --text-soft: #B3A6BD;
    --heading: #E5D4F0;
    --accent: #C79BC4;
    --accent-soft: #D9B7D6;
    --lavender: #B79FE0;
    --rose: #E39BB4;
    --pink-soft: #4A3A48;
    --success: #8CC3A5;
    --warn: #D4AC77;
    --note: #B9AFE8;
    --border: #463B52;
    --focus: #C7A8F0;
    --shadow: 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, .4);
    --backdrop: rgba(12, 9, 16, .6);
  }
}

/* Dark surfaces need light "ink" on accent-filled controls */
:root[data-theme="dark"] .ink-on-accent,
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .ink-on-accent { color: #241D2B; } }