/* ═══════════════════════════════════════════════════════════════
   template.css — Subumbra design tokens
   All colours, radii, spacing and typography live here.
   Import this file first, then main.css.
═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand accent colours ────────────────────────────────── */
  --color-green:        #22c55e;
  --color-red:          #ef4444;
  --color-yellow:       #f59e0b;
  --color-blue:         #3b82f6;

  /* ── Provider badge palettes ─────────────────────────────── */
  --provider-anthropic-bg:   #451a03;
  --provider-anthropic-fg:   #fb923c;
  --provider-openai-bg:      #052e16;
  --provider-openai-fg:      #4ade80;
  --provider-groq-bg:        #1e1b4b;
  --provider-groq-fg:        #a78bfa;
  --provider-deepseek-bg:    #082f49;
  --provider-deepseek-fg:    #38bdf8;
  --provider-unknown-bg:     #1e293b;
  --provider-unknown-fg:     #94a3b8;

  /* ── Surface / background scale ─────────────────────────── */
  --bg-page:            #061027;
  --bg-surface:         #1e293b;
  --bg-raised:          #263044;
  --bg-sunken:          #0f172a;

  /* ── Border colours ──────────────────────────────────────── */
  --border-subtle:      #334155;
  --border-focus:       var(--color-blue);

  /* ── Text scale ──────────────────────────────────────────── */
  --text-primary:       #f1f5f9;
  --text-secondary:     #e2e8f0;
  --text-muted:         #94a3b8;
  --text-faint:         #64748b;
  --text-ghost:         #475569;
  --text-invisible:     #334155;

  /* ── Status colours ──────────────────────────────────────── */
  --status-ok:          var(--color-green);
  --status-deny:        var(--color-yellow);
  --status-err:         var(--color-red);

  /* ── Alert surface colours ───────────────────────────────── */
  --alert-error-bg:     #450a0a;
  --alert-error-border: #991b1b;
  --alert-error-fg:     #fca5a5;

  --alert-warn-bg:      #451a03;
  --alert-warn-border:  #92400e;
  --alert-warn-fg:      #fcd34d;

  --alert-info-bg:      #1e3a8a;
  --alert-info-border:  #1d4ed8;
  --alert-info-fg:      #bfdbfe;

  --alert-note-bg:      #0c2d48;
  --alert-note-border:  #1e6091;
  --alert-note-fg:      #7ec8e3;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:          'Segoe UI', system-ui, sans-serif;
  --font-mono:          ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  --text-xs:            0.72rem;
  --text-sm:            0.78rem;
  --text-base:          0.85rem;
  --text-md:            1rem;
  --text-lg:            1.1rem;
  --text-xl:            1.6rem;

  --weight-regular:     400;
  --weight-semibold:    600;
  --weight-bold:        700;

  --leading-tight:      1;
  --leading-normal:     1.4;

  --tracking-wide:      0.05em;
  --tracking-wider:     0.06em;
  --tracking-widest:    0.08em;

  /* ── Spacing scale ───────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-width: 1px;
  --border:       var(--border-width) solid var(--border-subtle);

  /* ── Z-index layers ──────────────────────────────────────── */
  --z-topbar:   100;
  --z-modal:    200;
  --z-overlay:  199;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.2s ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --content-max-width: 1200px;
  --topbar-height:     52px;
}