/* ── Color tokens ───────────────────────────────────────────────────
   Sage + lavender brand system over calm neutrals. LIGHT is the default,
   product-leading theme (warm paper + charcoal); DARK is a full companion
   re-map on [data-theme='dark'].

   Brand rule (from the design system MASTER): SAGE carries the primary
   action fill and app-icon identity; LAVENDER is the high-contrast accent
   for focus rings, active-state text, and icons. RED is destructive ONLY —
   never for overdue / time states (anti-guilt philosophy). */

:root,
[data-theme='light'] {
  /* Brand constants (theme-independent identity colors) */
  --brand-sage: #a7bfa6;
  --brand-lavender: #c4b4e6;
  --brand-background: #f6f4f1;
  --brand-charcoal: #4a4a4a;

  /* Surfaces & text (light — warm paper) */
  --bg: #f6f4f1;
  --surface: #fffdf9;
  --surface-hover: #ede8e1;
  --surface-raised: #fbf7f0;
  --border: #ded8cd;
  --border-light: #ebe5dc;
  --text: #4a4a4a;
  --text-muted: #60685f;
  --text-dim: #667063;

  /* Accent system — accessible sage accent, sage action fill */
  --accent: #556f51; /* accessible sage for text/icon use */
  --accent-hover: #50694d;
  --accent-dim: rgba(85, 111, 81, 0.15);
  --accent-fill: #a7bfa6; /* brand sage action fill */
  --accent-fill-hover: #9ab399;
  --on-accent-fill: #263027;

  /* Semantic status (light) */
  --red: #dc2626; /* destructive ONLY */
  --red-dim: rgba(220, 38, 38, 0.12);
  --on-danger: #ffffff;
  --amber: #d97706; /* gentle nudges, overdue */
  --amber-dim: rgba(217, 119, 6, 0.12);
  --green: #16a34a; /* completion, release = positive */
  --green-dim: rgba(22, 163, 74, 0.12);
  --on-success: #ffffff;
  --blue: #2563eb; /* informational */
  --blue-dim: rgba(37, 99, 235, 0.12);

  /* User-facing palette color — distinct purple in light */
  --purple: #7c3aed;
  --purple-dim: rgba(124, 58, 237, 0.12);

  /* Elevation — soft, low-opacity shadows in light */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Focus & scrim */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--accent-dim);
  --scrim: rgba(0, 0, 0, 0.6);
  --scrim-muted: rgba(0, 0, 0, 0.5);

  /* Google sign-in button chrome */
  --google-button-bg: #ffffff;
  --google-button-text: #333333;
  --google-button-border: #dadce0;
  --google-button-hover-bg: #f6f4f1;
}

/* ── Dark theme (companion) ── */
[data-theme='dark'] {
  --bg: #1f2420;
  --surface: #252b26;
  --surface-hover: #2e352f;
  --surface-raised: #343c35;
  --border: #3d473e;
  --border-light: #4c584d;
  --text: #f6f4f1;
  --text-muted: #c9d3c6;
  --text-dim: #bdc8b9;

  --accent: #c4b4e6; /* lavender accent in dark */
  --accent-hover: #d9caff;
  --accent-dim: rgba(196, 180, 230, 0.15);
  --accent-fill: #a7bfa6;
  --accent-fill-hover: #b8cdb6;
  --on-accent-fill: #263027;

  --red: #e55;
  --red-dim: rgba(238, 85, 85, 0.12);
  --amber: #e8a33c;
  --amber-dim: rgba(232, 163, 60, 0.12);
  --green: #4aba6a;
  --green-dim: rgba(74, 186, 106, 0.12);
  --blue: #4a9aba;
  --blue-dim: rgba(74, 154, 186, 0.12);

  --purple: #c4b4e6;
  --purple-dim: rgba(196, 180, 230, 0.12);

  /* Dark mode relies on borders, not shadow depth */
  --shadow: none;
  --shadow-sm: none;
  --shadow-popover: none;
}