/* ============================================================
   MELLOW CARE — DESIGN TOKENS
   The whole design system. Day/night is a token swap here,
   never a duplicated ruleset. Components must not name a raw
   colour — if you need a new one, add it to BOTH blocks below.
   ============================================================ */
:root{
  /* --- raw palette (never used directly in components) --- */
  --c-forest:#1E3A2F; --c-sage:#5C7A6B; --c-sand:#E8DFD0; --c-cream:#F7F3EC;
  --c-rose:#C58A7E;   --c-rose-deep:#A96B5F; --c-ink:#23281F;
  --c-neon:#FF2D8A;   --c-neon-2:#FF7AB8;    --c-mint:#7FD8AC;

  /* --- surfaces --- */
  --bg:#F7F3EC;
  --bg-elev:#F1EBE0;
  --bg-band:#1E3A2F;
  --band-ink:#F7F3EC;
  --band-dim:rgba(247,243,236,.72);
  --surface:#FFFFFF;
  --surface-glass:rgba(255,255,255,.82);
  --surface-inset:#F7F3EC;
  --hairline:rgba(30,58,47,.12);
  --hairline-strong:rgba(30,58,47,.22);

  /* --- type --- */
  --text:#23281F;
  --text-dim:#6A7167;
  --heading:#1E3A2F;

  /* --- accent (the through-line: clay-rose by day, neon by night) --- */
  --accent:#C58A7E;
  --accent-2:#986056;
  --accent-soft:rgba(197,138,126,.16);
  --on-accent:#23281F;
  --secondary:#5C7A6B;

  /* --- buttons --- */
  --btn-bg:linear-gradient(180deg,#26493B,#1E3A2F);
  --btn-ink:#F7F3EC;
  --btn-bg-hover:linear-gradient(180deg,#9E6459,#8A5750);
  --btn-ghost-brd:rgba(30,58,47,.25);

  /* --- light & depth --- */
  --glow:none;
  --glow-soft:none;
  --mesh-a:rgba(197,138,126,.20);
  --mesh-b:rgba(92,122,107,.16);
  --mesh-c:rgba(232,223,208,.55);
  --spot:rgba(197,138,126,.16);
  --shadow-sm:0 8px 24px -12px rgba(30,58,47,.25);
  --shadow:0 18px 50px -20px rgba(30,58,47,.28);
  --shadow-3d:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 4px -2px rgba(30,58,47,.12),
      0 24px 48px -24px rgba(30,58,47,.34);
  --bevel:inset 0 1px 0 rgba(255,255,255,.85);
  --grain:.045;
  --ring:#986056;

  /* --- zone dots --- */
  --z-green:#5C7A6B; --z-amber:#D9A441; --z-clay:#C0705F;
}

[data-theme="dark"]{
  color-scheme:dark;

  --bg:#090B0D;
  --bg-elev:#0E1215;
  --bg-band:#05070A;
  --band-ink:#ECEFEA;
  --band-dim:rgba(236,239,234,.66);
  --surface:rgba(255,255,255,.045);
  --surface-glass:rgba(16,20,24,.72);
  --surface-inset:rgba(255,255,255,.03);
  --hairline:rgba(255,255,255,.10);
  --hairline-strong:rgba(255,45,138,.35);

  --text:#E7EBE6;
  --text-dim:#98A29C;
  --heading:#F4F7F2;

  --accent:#FF2D8A;
  --accent-2:#FF7AB8;
  --accent-soft:rgba(255,45,138,.14);
  --on-accent:#0A0C0E;
  --secondary:#7FD8AC;

  --btn-bg:linear-gradient(180deg,#FF4F9C,#E01C74);
  --btn-ink:#FFFFFF;
  --btn-bg-hover:linear-gradient(180deg,#FF6FB0,#FF2D8A);
  --btn-ghost-brd:rgba(255,255,255,.22);

  --glow:0 0 24px rgba(255,45,138,.45), 0 0 64px rgba(255,45,138,.18);
  --glow-soft:0 0 18px rgba(255,45,138,.22);
  --mesh-a:rgba(255,45,138,.22);
  --mesh-b:rgba(64,190,140,.14);
  --mesh-c:rgba(120,60,180,.14);
  --spot:rgba(255,45,138,.16);
  --shadow-sm:0 10px 30px -16px rgba(0,0,0,.85);
  --shadow:0 30px 70px -30px rgba(0,0,0,.95);
  --shadow-3d:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(255,45,138,.10),
      0 30px 60px -28px rgba(0,0,0,.95);
  --bevel:inset 0 1px 0 rgba(255,255,255,.10);
  --grain:.05;
  --ring:#FF7AB8;

  --z-green:#5FD3A0; --z-amber:#F0C061; --z-clay:#FF7AB8;
}