/* ─────────────────────────────────────────────────────────────────
   KOWL · Color tokens
   Source: src/app/globals.css (":root" KOWL brand block) + Figma
   "KOWL — Manager". The product is a pure dark theme: black canvas,
   white text, four saturated accents that carry meaning.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand core ─────────────────────────────────────────────── */
  --kowl-bg: #000000;            /* app canvas — true black            */
  --kowl-text: #ffffff;          /* primary text on dark               */
  --kowl-muted: #808080;         /* secondary text, labels, captions   */
  --kowl-on-surface: #1d1b20;    /* text on white pills / light fills  */

  /* ── Accents (each is also a status signal) ─────────────────── */
  --kowl-green: #01ff95;         /* good / done / "Core" — score ≥ 70  */
  --kowl-pink: #ff006a;          /* alert / critical / brand pop       */
  --kowl-yellow: #ffc800;        /* warning / "Secondary" — score 40–69*/
  --kowl-blue: #007bff;          /* info / "Passive" signals           */

  /* A softer mint used for solid action buttons (e.g. "Search") */
  --kowl-green-soft: #4ade80;

  /* ── Lines & fills ──────────────────────────────────────────── */
  --kowl-border-soft: #808080;   /* default 1px card / pill border     */
  --kowl-border-hairline: #1e1e1e; /* footer / faint section divider   */
  --kowl-surface-raised: #0d0d0d;  /* dropdown / menu background        */
  --kowl-track: #404040;         /* progress-bar & gauge track (thick) */
  --kowl-track-thin: #2a2a2a;    /* 2px scoring-gauge track            */
  --kowl-track-dot: #686868;     /* dotted "trail" separator           */

  /* ── Brand gradients ────────────────────────────────────────── */
  /* Charcoal sweep, dark→grey→dark. Used on cards, pills, the nav. */
  --kowl-grad-h: linear-gradient(90deg, #000 0%, #404040 50.481%, #000 100%); /* @kind color */
  --kowl-grad-v: linear-gradient(180deg, #000 0%, #404040 49.519%, #000 100%); /* @kind color */
  --kowl-grad-menu: linear-gradient(86.22deg, #000 0%, #404040 50.481%, #000 100%); /* @kind color */
  /* Soft horizontal hairline used inside cards */
  --kowl-divider-soft: linear-gradient(90deg, transparent 0%, #404040 50%, transparent 100%); /* @kind color */

  /* ── Score-ring track gradient (decorative, never fills) ─────── */
  --kowl-ring-stop-0: #000000;
  --kowl-ring-stop-55: #1f1f1f;
  --kowl-ring-stop-100: #a8a8a8;

  /* ── Selection / focus ──────────────────────────────────────── */
  --kowl-selection: rgb(74 222 128 / 0.35);

  /* ────────────────────────────────────────────────────────────
     Semantic aliases — prefer these in components.
     ──────────────────────────────────────────────────────────── */
  --surface-canvas: var(--kowl-bg);
  --surface-card: var(--kowl-grad-v);
  --surface-raised: var(--kowl-surface-raised);
  --surface-pill: var(--kowl-grad-h);
  --surface-pill-light: #ffffff;

  --text-primary: var(--kowl-text);
  --text-muted: var(--kowl-muted);
  --text-on-light: var(--kowl-on-surface);
  --text-accent: var(--kowl-pink);

  --border-default: var(--kowl-border-soft);
  --border-hairline: var(--kowl-border-hairline);

  --status-good: var(--kowl-green);
  --status-warn: var(--kowl-yellow);
  --status-alert: var(--kowl-pink);
  --status-info: var(--kowl-blue);
}