/* ═══════════════════════════════════════════════════════════════════
   Ampron UI v2 — tokens.css
   The single style source for ALL Ampron software UI.
   Import this; never redefine a value that lives here.

   Owner: Designer · Version: 2.0 · Effective: 2026-06-14
   Master held by the Designer. Conforms to ampron-component-baseline-spec.html.

   Two themes, identical markup — only [data-theme] tokens change.
   Two fonts — Lexend (UI), JetBrains Mono (IDs/counts/timestamps).
   Red is one signal: brand mark, primary action, focus, "needs a human."
   Status colour is never decorative. Never pink or purple.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   TYPE
   ─────────────────────────────────────────────── */
:root {
  --font-ui:   'Lexend', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* ───────────────────────────────────────────────
   LIGHT (default)
   ─────────────────────────────────────────────── */
:root {
  /* Brand — red is accent + attention only. Canonical #E30613 (Gen's call). */
  --red:          #E30613;
  --red-tint:     #fdf1f2;
  --red-border:   rgba(227,6,19,0.18);
  --red-soft:     rgba(227,6,19,0.10);

  /* Semantic status — meaning only, never styling.
     green = online/OK/done · amber = warning/in-progress
     red = alert/critical/blocked · blue = info/queued/current */
  --green:        #16a34a;
  --green-tint:   #f0fdf4;
  --amber:        #d97706;
  --amber-tint:   #fffbeb;
  --blue:         #2563eb;
  --blue-tint:    #eff6ff;

  /* Ink (text) */
  --ink-1:        #111827;   /* primary text, headings, stat values */
  --ink-2:        #374151;   /* body, table cells */
  --ink-3:        #6b7280;   /* supporting, metadata, sub-labels */
  --ink-4:        #9ca3af;   /* faint labels, disabled, section heads */

  /* Surfaces */
  --bg:           #f8f9fa;
  --surface-1:    #ffffff;
  --surface-2:    #f8f9fa;
  --surface-3:    #f3f4f6;

  /* Lines */
  --divider:      #e5e7eb;
  --border:       #e5e7eb;

  /* Geometry — 16px cards, 10px controls, pills for chips */
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    22px;

  /* Elevation */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:       0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);

  /* Issue-stage colours — six stages mapped onto the four hues + neutral.
     Review = solid blue (Gen's call). */
  --stage-backlog:    var(--ink-3);
  --stage-todo:       var(--blue);
  --stage-inprogress: var(--amber);
  --stage-review:     var(--blue);
  --stage-done:       var(--green);
  --stage-blocked:    var(--red);

  /* Priority colours (issue cards) */
  --prio-critical:    var(--red);
  --prio-medium:      var(--amber);
  --prio-low:         var(--blue);

  /* Semantic layout surfaces — column bg / card bg (distinct in both themes) */
  --surface-col:      var(--surface-2);
  --surface-card:     var(--surface-1);

  /* Motion — no bounce, no spring */
  --ease:         cubic-bezier(.4, 0, .2, 1);   /* standard */
  --ease-out:     cubic-bezier(.16, 1, .3, 1);  /* entrances */
  --dur-hover:    120ms;
  --dur:          150ms;
  --dur-appear:   200ms;
}

/* ───────────────────────────────────────────────
   DARK — only tokens change, never the markup.
   Brand red stays #E30613; its tints/borders adjust for dark surfaces.
   ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --red-tint:     rgba(227,6,19,0.12);
  --red-border:   rgba(227,6,19,0.22);
  --red-soft:     rgba(227,6,19,0.22);

  --green:        #22c55e;
  --green-tint:   rgba(34,197,94,0.12);
  --amber:        #f59e0b;
  --amber-tint:   rgba(245,158,11,0.12);
  --blue:         #60a5fa;
  --blue-tint:    rgba(96,165,250,0.12);

  --ink-1:        #f0eff0;
  --ink-2:        #b8b6ba;
  --ink-3:        #807e84;
  --ink-4:        #4a484f;

  --bg:           #0f0f10;
  --surface-1:    #17171a;
  --surface-2:    #1e1e22;
  --surface-3:    #252529;

  --divider:      rgba(255,255,255,0.07);
  --border:       rgba(255,255,255,0.10);

  --shadow-sm:    0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow:       0 4px 16px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.30);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.40);

  /* Dark-mode surface overrides for col/card elevation */
  --surface-col:  var(--surface-1);
  --surface-card: var(--surface-2);
}