/* ── 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) ---- */
  --text:       #ffffff;  /* primary */
  --text-muted: #666666;  /* secondary / labels */
  --text-dim:   #333333;  /* tertiary / disabled / em-dashes */

  /* ---- 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);

  /* ---- 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);
}