/* Semantic layers. Everything in a Karlife mockup uses only these names.
   Light "Blush" is the default; :root carries it so a page without data-theme still works. */
:root,[data-theme="light"]{
  --bg-app:#FBF1F2; --bg-surface:#FFFFFF; --bg-surface-soft:#FFF8F9; --bg-subtle:#FDE9EF;
  --text-primary:#201D1E; --text-secondary:#6C6463; --text-tertiary:#8C8584; --text-disabled:#ACA6A5; --text-on-accent:#FFFFFF;
  --border-subtle:#F6E4E8; --border-default:#F0D8DE; --border-focus:#E86F94;
  --action-primary:#C44A70; --action-primary-pressed:#A93D60;
  --action-secondary-bg:#FDE9EF; --action-secondary-text:#A93D60; --action-tertiary-text:#C44A70;
  --accent:#D65B82; --accent-soft:#FDE9EF; --decor-botanical:#F4B3C5;
  --data-calories:#D65B82; --data-protein:#E45F85; --data-fat:#E4A056; --data-carbs:#9875C8; --data-fiber:#64A66C;
  --tint-calories:#FBE7EE; --tint-protein:#FCEAF0; --tint-fat:#FBF0E4; --tint-carbs:#F1ECF8; --tint-fiber:#EAF5EB;
  --success:#3F8B57; --success-bg:#EAF5ED; --warning:#B77626; --warning-soft:#E8B26A; --warning-bg:#FFF4E4;
  --danger:#B84652; --danger-bg:#FCECEE; --info:#4E79A8; --info-bg:#ECF3FB;
  --shadow-1:0 2px 8px rgba(42,32,36,.05); --shadow-2:0 6px 18px rgba(42,32,36,.10); --shadow-3:0 14px 40px rgba(42,32,36,.16);
  /* v2.2 — shadow/floating: soft, wide, low opacity. Floating tab bar + gauge badge.
     Light theme carries the depth in the shadow; --surface-floating is plain white. */
  --shadow-floating:0 12px 32px rgba(42,32,36,.10),0 2px 6px rgba(42,32,36,.04);
  --surface-floating:#FFFFFF;
  --ring-track:#F6DCE3;
  /* v2.2 — CalorieGauge decor: halo outline around the arc, decorative dotted inner arc. */
  --ring-halo:#FBE3E9; --ring-halo-over:#F7E5CD; --ring-dots:#F4CBD7;
  /* v2.2.1 — selected day. White on --accent is 3.7:1, below AA for an 11pt label, so the active
     DayCard uses action/primary: white on #C44A70 is 4.60:1. */
  --day-active-bg:#C44A70; --day-active-text:#FFFFFF;
  /* Progress-arc gradients. Single hue, light -> dark, read as lighting on the stroke.
     No white, no second hue. The over-limit pair is the warning state's own light -> dark. */
  --ring-arc-from:#FAD3DF; --ring-arc-to:#D65B82;
  --ring-arc-over-from:#E8B26A; --ring-arc-over-to:#B77626;
  --scrollbar-size:10px; /* @kind other */
  --scrollbar-track:#FBEAEE;
  --scrollbar-thumb:#F1C0CF;
  --scrollbar-thumb-hover:#E79CB3;
  --decor-opacity:.24; /* @kind other */
}
[data-theme="dark"]{
  --bg-app:#191419; --bg-surface:#241D24; --bg-surface-soft:#1F191F; --bg-subtle:#2A222A;
  --text-primary:#F9F3F5; --text-secondary:#C7BAC1; --text-tertiary:#9C8C97; --text-disabled:#5C4E5A; --text-on-accent:#FFFFFF;
  --border-subtle:#2A222A; --border-default:#332A33; --border-focus:#F08EAA;
  --action-primary:#D65B82; --action-primary-pressed:#C44A70;
  --action-secondary-bg:#332438; --action-secondary-text:#F4B3C5; --action-tertiary-text:#F08EAA;
  --accent:#F08EAA; --accent-soft:#3A2531; --decor-botanical:#5C4054;
  --data-calories:#EE8FAA; --data-protein:#F17B9B; --data-fat:#F0B36A; --data-carbs:#B291E0; --data-fiber:#7FBE87;
  --tint-calories:#3A2531; --tint-protein:#3A2531; --tint-fat:#3A2E1F; --tint-carbs:#2F2740; --tint-fiber:#22332A;
  --success:#7FBE87; --success-bg:#22332A; --warning:#E0A45C; --warning-soft:#F2CB93; --warning-bg:#3A2E1F;
  --danger:#E0798A; --danger-bg:#3C2229; --info:#8AB4DE; --info-bg:#22303C;
  --shadow-1:0 2px 8px rgba(0,0,0,.30); --shadow-2:0 6px 18px rgba(0,0,0,.40); --shadow-3:0 14px 40px rgba(0,0,0,.55);
  /* v2.2 — In Plum a shadow on a dark surface reads as nothing. The floating counterpart lifts the
     surface instead (#302730, one step above --bg-surface) and keeps only a faint contact shadow. */
  --shadow-floating:0 10px 28px rgba(0,0,0,.34);
  --surface-floating:#302730;
  --ring-track:#3A2F38;
  --ring-halo:#3F3340; --ring-halo-over:#4A3A24; --ring-dots:#4A3B47;
  /* In Plum every accent that passes as a fill is light, so white text can't work: the active day
     inverts — accent #F08EAA with plum ink #191419 is 7.92:1. */
  --day-active-bg:#F08EAA; --day-active-text:#191419;
  --ring-arc-from:#FAD3DF; --ring-arc-to:#D65B82;
  --ring-arc-over-from:#F2CB93; --ring-arc-over-to:#E0A45C;
  --scrollbar-size:10px; /* @kind other */
  --scrollbar-track:#241D24;
  --scrollbar-thumb:#4E3B48;
  --scrollbar-thumb-hover:#6B5060;
  --decor-opacity:.16; /* @kind other */
}