:root{
  /* ---- Warm neutrals (cream / ivory / ink) ---- */
  --cream-50:#FBF8F2;   /* app background, lightest */
  --cream-100:#F6F1E7;  /* raised surface / card */
  --cream-150:#EFE8DA;  /* subtle fill, hover */
  --cream-200:#E7DECC;  /* past-week dot fill */
  --cream-300:#D8CDB6;  /* hairline borders */
  --sand-400:#C6B698;   /* outline / future-week dot stroke */
  --sand-500:#A89773;   /* decorative */

  --ink-900:#2B2620;    /* primary text (never pure black) */
  --ink-700:#4C4438;    /* secondary text */
  --ink-500:#71685A;    /* muted text */
  --ink-400:#948B7B;    /* faint text, captions */
  --ink-300:#B4AA98;    /* disabled */

  /* ---- Warm accent: terracotta (reserved for "current week" & primary action) ---- */
  --terracotta-100:#F3E0D4;
  --terracotta-300:#E0A886;
  --terracotta-500:#C0714A; /* the accent */
  --terracotta-600:#A85E3B; /* press / darker */

  /* ---- Gold (secondary warmth, subtle emphasis) ---- */
  --gold-100:#F4E9CE;
  --gold-500:#C4972F;
  --gold-600:#A87F22;

  /* ---- Milestone category hues (soft, muted, never neon) ---- */
  --milestone-clay:#B4623F;
  --milestone-sage:#7C8B67;
  --milestone-sky:#5E7E93;
  --milestone-plum:#8A6580;
  --milestone-ochre:#C4972F;

  /* ---- Semantic aliases ---- */
  --bg-app:var(--cream-50);
  --surface-card:var(--cream-100);
  --surface-sunken:var(--cream-150);
  --border-hairline:var(--cream-300);
  --border-strong:var(--sand-400);

  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-disabled:var(--ink-300);
  --text-on-accent:var(--cream-50);

  --accent:var(--terracotta-500);
  --accent-press:var(--terracotta-600);
  --accent-tint:var(--terracotta-100);

  /* ---- Life-grid dot semantics ---- */
  --dot-past:var(--cream-200);      /* weeks lived — filled cream */
  --dot-past-border:transparent;
  --dot-future:transparent;         /* weeks remaining — open contour */
  --dot-future-border:var(--sand-400);
  --dot-current:var(--terracotta-500); /* this week — the accent */
}

/* ===== Oscuro contemplativo: near-black warm bg, gold accent (data-theme="dark") ===== */
[data-theme="dark"]{
  --cream-50:#191510;   /* app background — warm near-black, never pure #000 */
  --cream-100:#221D16;  /* raised surface / card */
  --cream-150:#2A241B;  /* subtle fill, hover */
  --cream-200:#3A3226;  /* past-week dot fill (warm) */
  --cream-300:#332D23;  /* hairline borders */
  --sand-400:#4E4636;   /* outline / future-week dot stroke */
  --sand-500:#6A5F49;

  --ink-900:#F1EADC;    /* primary text — warm off-white */
  --ink-700:#D2C9B7;    /* secondary */
  --ink-500:#9C9281;    /* muted */
  --ink-400:#7C7261;    /* faint / captions */
  --ink-300:#5C543F;    /* disabled */

  /* accent shifts to warm gold — luminous on near-black */
  --terracotta-100:rgba(214,166,79,0.17); /* tint / halo */
  --terracotta-300:#C79A54;
  --terracotta-500:#D6A64F; /* the accent (gold) */
  --terracotta-600:#BC8C39; /* press */
  --gold-500:#D6A64F;

  --text-on-accent:#191510; /* dark text on gold */

  /* Re-declare semantic aliases INSIDE this scope so their var() resolves against
     the dark base tokens above (var() in a custom prop resolves at its declaring
     element, so :root's aliases would otherwise stay light). */
  --bg-app:var(--cream-50);
  --surface-card:var(--cream-100);
  --surface-sunken:var(--cream-150);
  --border-hairline:var(--cream-300);
  --border-strong:var(--sand-400);
  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-disabled:var(--ink-300);
  --accent:var(--terracotta-500);
  --accent-press:var(--terracotta-600);
  --accent-tint:var(--terracotta-100);
  --dot-past:var(--cream-200);
  --dot-future-border:var(--sand-400);
  --dot-current:var(--terracotta-500);

  /* soft, deeper shadows for depth on dark */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:0 4px 14px rgba(0,0,0,0.36);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.44);
}