/* ============================================================
   MEDSY — COLOR TOKENS
   Forest grounds it, mint brings it to life, charcoal keeps it
   readable — all on a clean white canvas. Never gray; hairlines
   and shadows are always green-tinted.
   ============================================================ */
:root{
  /* ---- core palette ---- */
  --white:#FFFFFF;
  --mist:#F5F5F5;

  --forest:#0F6844;          /* primary */
  --forest-rgb:15,104,68;    /* @kind other */
  --forest-900:#063a28;
  --forest-700:#0b5238;
  --forest-400:#2b805a;       /* AA as small label text on white (4.8:1) */
  --forest-300:#5aa886;

  --mint:#5FE8B1;            /* secondary */
  --mint-rgb:95,232,177;     /* @kind other */
  --mint-400:#82edc4;
  --mint-300:#a6f2d6;
  --mint-200:#c9f8e7;
  --mint-100:#e7fcf3;
  --mint-50:#f3fdf9;

  --ink:#333333;             /* charcoal — body text */
  --ink-soft:#565a58;
  --ink-faint:#626a65;        /* soft green-gray — AA on white (5.6:1), mist (5.1:1) and
                                 every mint tint, so micro-labels stay legible on any surface */

  /* ---- pastel sparks · use sparingly for accents ---- */
  --peach:#FFD8C4;
  --coral:#FFC3B4;
  --lilac:#E3DCFF;
  --butter:#FBF1C2;
  --sky:#CFEBFF;

  /* ---- semantic status ---- */
  --danger:#E5484D;
  --danger-ink:#B42318;
  --danger-soft:#FDECEA;
  --danger-line:rgba(229,72,77,.32);
  --warn-ink:#7d6317;         /* AA on butter warn surfaces (5:1) */
  --warn-line:rgba(138,109,26,.24);
  --info-ink:#1f5d8a;
  --info-line:rgba(31,93,138,.2);

  /* ---- hairlines (green tinted, never gray) ---- */
  --line:rgba(var(--forest-rgb),.12);
  --line-soft:rgba(var(--forest-rgb),.07);
  --line-mint:rgba(var(--mint-rgb),.45);

  /* ---- semantic aliases ---- */
  --bg:var(--white);
  --surface:var(--white);
  --surface-mist:var(--mist);
  --surface-card:var(--white);
  --surface-soft:var(--mint-50);
  --text-strong:var(--forest-900);
  --text-body:var(--ink);
  --text-muted:var(--ink-soft);
  --text-faint:var(--ink-faint);
  --text-brand:var(--forest);
  --surface-glass:rgba(255,255,255,.72); /* frosted bars/cards — flips dark  @kind color */
  --glass-rim:rgba(255,255,255,.7);   /* the lit top edge of a glass surface  @kind color */
  --shimmer:rgba(255,255,255,.7);     /* skeleton sweep — dimmer on dark  @kind color */
  --on-brand:#FFFFFF;         /* ink that sits ON a --forest fill (avatars, badges,
                                 selected days, filled steps). Flips dark in dark theme,
                                 where --forest brightens — never hardcode #fff there. */
  --border:var(--line);
  --border-soft:var(--line-soft);
  --focus-ring:rgba(var(--mint-rgb),.4);
  --selection-bg:var(--mint);

  /* ---- gradients ---- @kind color ---- */
  --grad-primary:linear-gradient(135deg,#0F6844 0%,#1a875a 48%,#5FE8B1 100%); /* @kind color */
  /* bars: vertical so the ramp reads the same at every bar height — a 135deg fill
     renders differently per box and implied a category difference  @kind color */
  --grad-bar:linear-gradient(180deg,#5FE8B1 0%,#1a875a 58%,#0F6844 100%); /* @kind color */
  --grad-text:linear-gradient(135deg,#0F6844 0%,#12855b 52%,#17a173 100%); /* clipped-to-glyph headlines — lightest stop holds 3.3:1 on white  @kind color */
  --grad-btn-primary:linear-gradient(180deg,#17855b 0%,#0F6844 52%,#0b5638 100%); /* @kind color */
  --grad-btn-secondary:linear-gradient(180deg,#71edbd 0%,#54e4a9 100%); /* @kind color */
  --grad-deep:linear-gradient(150deg,#063a28 0%,#0F6844 60%,#1a875a 100%); /* @kind color */
  --grad-mint:linear-gradient(135deg,#5FE8B1 0%,#a6f2d6 100%); /* @kind color */
  --grad-soft:linear-gradient(160deg,#e7fcf3 0%,#ffffff 70%); /* @kind color */
  --grad-peach:linear-gradient(135deg,#FFD8C4 0%,#FBF1C2 100%); /* @kind color */
  --grad-lilac:linear-gradient(135deg,#E3DCFF 0%,#CFEBFF 100%); /* @kind color */
  --grad-spark:linear-gradient(120deg,#5FE8B1 0%,#CFEBFF 50%,#E3DCFF 100%); /* @kind color */

  /* ---- on deep-forest surfaces · formalizes the ad-hoc white-on-dark values
     used in section/stat/closing slides, the footer and stat band ---- */
  --on-dark-text:#FFFFFF; /* @kind color */
  --on-dark-muted:rgba(255,255,255,.72); /* @kind color */
  --on-dark-faint:rgba(255,255,255,.58); /* AA (5.3:1) on deep forest  @kind color */
  --on-dark-line:rgba(255,255,255,.18); /* @kind color */
  --on-dark-chip:rgba(255,255,255,.14); /* @kind color */
}

/* ---- wide gamut · P3 displays get the mint the sRGB hex can only approximate.
   Fills and gradients go vivid; rgba() glows keep the sRGB triplets. ---- */
@media (color-gamut:p3){
  :root{
    --mint:oklch(87.5% .205 163);
    --grad-primary:linear-gradient(135deg,#0F6844 0%,#1a875a 48%,oklch(87.5% .205 163) 100%); /* @kind color */
    --grad-bar:linear-gradient(180deg,oklch(87.5% .205 163) 0%,#1a875a 58%,#0F6844 100%); /* @kind color */
    --grad-mint:linear-gradient(135deg,oklch(87.5% .205 163) 0%,#a6f2d6 100%); /* @kind color */
    --selection-bg:oklch(87.5% .205 163);
  }
  [data-theme="dark"],[data-theme="oled"]{
    --forest:oklch(75% .16 162);
    --text-brand:oklch(84% .17 163);
  }
}