/* ── Lifetime Coatings — Color tokens ──────────────────────────────────
   Brand palette is exactly three colors: black, white, cyan.
   Cyan #00ccf0 is the ONLY accent — never darkened, tinted, or substituted.
   Dashboards run a dark theme: near-black surfaces, white/gray text,
   cyan for primary actions + highlights.
   Status colors (green/amber/red) are FUNCTIONAL UI ONLY — not brand.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ---- Brand core (the only three brand colors) ---- */
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-cyan:  #00ccf0;   /* exact — never alter */

  /* ---- Cyan accent, with the alpha tints used across the UI ---- */
  --accent:        #00ccf0;
  --accent-dim:    rgba(0, 204, 240, 0.15);  /* fills, hover wash */
  --accent-mid:    rgba(0, 204, 240, 0.40);  /* hover borders, glows */
  --accent-soft:   rgba(0, 204, 240, 0.08);  /* faint card gradient top */
  --accent-glow:   rgba(0, 204, 240, 0.25);  /* text/box shadow glow */

  /* ---- Dark surfaces (near-black stack) ---- */
  --bg:        #000000;   /* page */
  --surface:   #0d0d0d;   /* cards */
  --surface-2: #151515;   /* inputs, nested */
  --surface-3: #1c1c1c;   /* tracks, chips, deepest */

  /* ---- Borders / hairlines ---- */
  --border:        rgba(255, 255, 255, 0.07);  /* default hairline */
  --border-strong: rgba(255, 255, 255, 0.14);  /* emphasized edge */
  --border-accent: rgba(0, 204, 240, 0.30);    /* accented card edge */

  /* ---- Text ramp (white → dim gray) ----
     Lightened 2026-07-29 (Tanner: "that dark gray color is so dark throughout the
     app, it's really hard to read in dark mode"). The old --text-dim #333333 was
     1.66:1 on the page and 1.45:1 on a --surface-2 card — effectively invisible, and
     it carried real content (counts, timestamps, "not due yet · 4"), not decoration.
     --text-muted had to come up with it, otherwise the two tiers collapse into the
     same gray and the hierarchy stops meaning anything. Light mode is unchanged.
     Ratios on #000 / on --surface-2: muted 6.9:1 / 6.0:1, dim 4.6:1 / 4.0:1. */
  --text:       #ffffff;  /* primary */
  --text-muted: #949494;  /* secondary / labels    (was #666666) */
  /* Raised #757575 → #8a8a8a on 2026-09-13 (Intent /include pass). The ratios recorded above are
     against pure #000, and almost nothing in this app sits on pure black: --text-dim was 4.22:1 on
     --surface #0d0d0d and 3.96:1 on a --surface-2 card, both under AA, and it carries every form
     label in the app. #8a8a8a is 5.29:1 on --surface-2 and still a clear step below --text-muted,
     so the two tiers stay distinct. */
  --text-dim:   #8a8a8a;  /* tertiary / disabled   (was #757575, was #333333) */

  /* ---- Functional status (UI ONLY — not brand) ---- */
  --green: #00f090;  /* win / on-pace / verified */
  --amber: #f0a000;  /* caution / pending / behind-soon */
  --red:   #f04060;  /* alert / overdue / lost */

  --green-dim: rgba(0, 240, 144, 0.12);
  --amber-dim: rgba(240, 160, 0, 0.12);
  --red-dim:   rgba(240, 64, 96, 0.12);

  /* ---- Status colors AS TEXT ----
     Added 2026-09-13 (Intent /include pass). The three above are tuned to carry meaning as fills,
     borders and dots, where contrast is judged against 3:1 for a graphic. The moment one of them
     becomes a WORD the bar is 4.5:1 against whatever it sits on, and in light mode they were
     catastrophic: #22c55e on white is 2.28:1, #f0a000 is 2.16:1, #f04060 is 3.75:1, and brand cyan
     as text is 1.78:1. The comment on the light block below claimed they "read fine on white". They
     do not.
     Separate tokens rather than darkening the originals, because the originals are correct as fills
     and changing them would repaint every chip and dot in the app.
     Dark values are the existing ones (they pass on our surfaces); light values are tuned against
     --surface-2 #efede7, the darkest ground any of them lands on. */
  --green-text:  #00f090;   /* 9.6:1 on #151515 */
  --amber-text:  #f0a000;   /* 6.9:1 */
  --red-text:    #ff6b6b;   /* 5.6:1 */
  --accent-text: var(--accent);
  /* Named alias for destructive UI. Every `var(--danger, #f04060)` in the app was silently using
     its fallback because this was never defined anywhere, which meant there was no single place to
     fix the light-mode red even if you wanted to. */
  --danger: var(--red-text);

  /* ---- Semantic aliases (use these in components) ---- */
  --text-body:        var(--text);
  --text-secondary:   var(--text-muted);
  --text-tertiary:    var(--text-dim);
  --surface-card:     var(--surface);
  --surface-input:    var(--surface-2);
  --surface-track:    var(--surface-3);
  --action-primary:   var(--accent);
  --action-on-primary:#000000;       /* text on a cyan button */
  --focus-ring:       rgba(0, 204, 240, 0.30);

  /* ---- Theme-aware chrome + backdrop (dark defaults) ---- */
  --bar:        #000000;                    /* header / tabbar / composer chrome */
  --grain-base: #000000;                    /* moving-grain backdrop base */
  --grain-glow-1: rgba(255, 255, 255, 0.13);/* the three drifting glow blobs */
  --grain-glow-2: rgba(255, 255, 255, 0.10);
  --grain-glow-3: rgba(255, 255, 255, 0.07);
  --grain-op:   0.13;                        /* film-grain layer opacity */
  color-scheme: dark;
}

/* ── LIGHT THEME ─────────────────────────────────────────────────────
   Same token names, light values. Brand cyan and the status FILLS stay exact — a --green chip
   background or an --accent button is correct on white.
   What IS overridden here, as of 2026-09-13: the *-text variants. This block used to say the status
   colors "read fine on white"; measured, they are 1.8-3.8:1 as text, all failing AA, and the worst
   of them is the brand cyan used for the required-field asterisk — the only marker that a field is
   required, which made it WCAG 1.4.1 as well.
   Dark shadows/scrims are left as-is app-wide — a dark drop shadow / modal dim is correct over a
   light surface too. */
html[data-theme="light"] {
  /* WARM, deliberately. The old ladder was #f3f4f6 / #eceef1 / #e1e4e8 — blue
     highest at every step, which against white cards reads as a violet-magenta
     cast (Tanner 2026-08-18: "a different background color for light mode that's
     less magenta"). Rebalancing toward cyan did NOT fix it ("feels the same to
     me"): still the same cool family. Tipping past neutral into warm is what
     removes it, and #00ccf0 pops harder against a warm ground than a cool one.
     Red highest, blue lowest, all the way down the ladder — keep it that way. */
  --bg:        #f7f6f2;
  --surface:   #ffffff;
  --surface-2: #efede7;
  --surface-3: #e4e1d9;

  --border:        rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);

  --text:       #14171a;
  --text-muted: #5b616b;
  /* #9aa1a9 was 2.61:1 on white and 2.23:1 on a --surface-2 card, carrying every form label on
     every sheet in the app. #656a72 is 5.44:1 / 4.65:1 (Intent /include pass 2026-09-13). */
  --text-dim:   #656a72;

  /* Status colors as TEXT — see the block in the dark theme. Tuned against --surface-2 #efede7. */
  --green-text:  #14742f;   /* 5.03:1 on #efede7, 5.88:1 on white */
  --amber-text:  #7d5100;   /* 5.88:1 / 6.89:1 */
  --red-text:    #b3143a;   /* 5.83:1 / 6.82:1 */
  --accent-text: #0a6f82;   /* 4.97:1 / 5.82:1 — cyan darkened for TEXT only; buttons keep --accent */

  --bar:        #ffffff;
  --grain-base: #f7f6f2;   /* matches --bg: the backdrop IS the page in light mode */
  --grain-glow-1: rgba(0, 0, 0, 0.05);
  --grain-glow-2: rgba(0, 0, 0, 0.04);
  --grain-glow-3: rgba(0, 0, 0, 0.03);
  --grain-op:   0.10;
  color-scheme: light;
}