/**
 * Seesweet Design Tokens — Sovereign System
 *
 * Default (Sovereign dark / Obsidian): :root with no data-theme attribute.
 * Sovereign light (Alabaster Slate):   :root[data-theme="light"].
 *
 * Early script in injectNav syncs from localStorage (csuite-theme).
 */

:root {
  /* Shared non-color scale */
  --font:         'General Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs:      10px;
  --text-sm:      11px;
  --text-base:    13px;
  --text-md:      14px;
  --text-lg:      15px;
  --text-xl:      18px;
  --text-2xl:     24px;
  --text-3xl:     28px;

  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;

  /* Sharp radii — Sovereign rule: nothing > 4px except pills */
  --radius-sm:    2px;
  --radius:       2px;
  --radius-md:    4px;
  --radius-lg:    4px;
  --radius-xl:    4px;
  --radius-pill:  999px;

  --nav-h:        40px;

  --ease:         0.15s cubic-bezier(0.2, 0, 0, 1);
  --ease-fast:    0.1s cubic-bezier(0.2, 0, 0, 1);

  color-scheme: dark;

  /* ── Sovereign Dark (Obsidian, default) ────────────────────────────────── */
  --bg:             #0A0C10;
  --bg-raised:      #13171E;
  --surface:        rgba(19, 23, 30, 0.88);
  --surface-2:      rgba(28, 32, 41, 0.92);
  --surface-3:      rgba(40, 46, 58, 0.72);
  --surface-hover:  rgba(0, 240, 255, 0.04);
  --overlay:        rgba(0, 0, 0, 0.65);
  --glass:          rgba(10, 12, 16, 0.92);
  --header-bg:      rgba(10, 12, 16, 0.94);

  --border:         rgba(255, 255, 255, 0.06);
  --border-strong:  rgba(255, 255, 255, 0.12);
  --border-dim:     rgba(255, 255, 255, 0.04);

  --text:           #F4F6FA;
  --text-2:         #C9D1E0;
  --text-3:         #6B7280;
  --text-muted:     #9CA3AF;

  /* Cyan is the active/brand signal — used as 1px strokes, dots, and glows only */
  --brand:          #00F0FF;
  --brand-dim:      rgba(0, 240, 255, 0.08);

  --accent:         #00F0FF;
  --accent-dim:     rgba(0, 240, 255, 0.08);
  --accent-line:    rgba(0, 240, 255, 0.35);
  --on-accent:      #0A0C10;

  --link:           #F4F6FA;

  /* Functional colors — semantic status (badges, alerts, charts) */
  --green:          #22c55e;
  --green-dim:      rgba(34, 197, 94, 0.10);
  --emerald:        #00FF41;
  --emerald-dim:    rgba(0, 255, 65, 0.08);

  --red:            #f87171;
  --red-dim:        rgba(248, 113, 113, 0.10);

  --yellow:         #fbbf24;
  --yellow-dim:     rgba(251, 191, 36, 0.10);
  --amber:          #f59e0b;
  --amber-dim:      rgba(245, 158, 11, 0.10);

  --blue:           #38bdf8;
  --blue-dim:       rgba(56, 189, 248, 0.10);
  --cyan:           #00F0FF;
  --cyan-dim:       rgba(0, 240, 255, 0.08);

  --purple:         #c4b5fd;
  --purple-dim:     rgba(196, 181, 253, 0.10);
  --indigo:         #818cf8;
  --indigo-dim:     rgba(129, 140, 248, 0.10);

  --orange:         #fb923c;
  --orange-dim:     rgba(251, 146, 60, 0.10);

  --pink:           #f9a8d4;
  --pink-dim:       rgba(249, 168, 212, 0.10);

  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:         0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg:      0 8px 28px rgba(0, 0, 0, 0.55);

  /* Glint — Apple-style "lit edge" treatment. A 1px highlight along the top
     (and a hint on the left) plus a soft drop on bottom/right. Compose with
     existing border so the rim catches ambient light at the top corners.
     Used on sidebars, headers, and ticket cards.
     - --glint-top: just the top highlight (use on full-bleed surfaces with
       only a bottom border, e.g. headers).
     - --glint-card: full top + bottom inset depth (use on rectangular cards
       and sidebars where all four edges are visible). */
  --glint-top:    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  --glint-card:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.30),
    inset -1px 0 0 0 rgba(0, 0, 0, 0.10);

  --nav-bg:         #0A0C10;
  --nav-border:     rgba(255, 255, 255, 0.08);
  --nav-brand:      #F4F6FA;
  --nav-tab:        #6B7280;
  --nav-tab-hover:  #F4F6FA;
  --nav-tab-active: #00F0FF;
  --nav-user:       #6B7280;
  --nav-signout:    #374151;

  --bg-primary:     var(--bg);
  /* Sidebars / headers — 85% opacity so frame is clearly present but
     ambient shimmer can still be felt at the edges. */
  --bg-secondary:   rgba(19, 23, 30, 0.85);
  --bg-tertiary:    var(--surface-2);
  --bg-hover:       var(--surface-hover);
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);

  /* Legacy aliases (index.html and older inline styles) */
  --text2:    var(--text-2);
  --text3:    var(--text-3);
  --border2:  var(--border-dim);
  --surface2: var(--surface-2);
  --surface3: var(--surface-3);

  --success: var(--emerald);
  --error:   var(--red);
  --warning: var(--yellow);

  /* Irregular bottom ambient (base.css) — multi-ellipse mesh, not linear/radial-only.
   * 2026-04-29 (v3): blues desaturated and dimmed (more muted slate vs the
   * earlier vivid royal-blue mix). Movement comes from base.css faster cycle
   * + wider opacity swing rather than from saturation. */
  --ambient-blob-1: rgba(40, 58, 96, 0.42);
  --ambient-blob-2: rgba(58, 78, 118, 0.28);
  --ambient-blob-3: rgba(46, 84, 110, 0.20);
  --ambient-blob-4: rgba(72, 96, 140, 0.15);

  /* Kanban (`build-html.js`) — legacy var names */
  --bg2:   var(--bg-raised);
  --focus: var(--accent);
  --fg:    var(--text);
  --muted: var(--text-muted);
}

/* ── Sovereign Light (Alabaster Slate) ────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:             #EEF0F3;
  --bg-raised:      #FFFFFF;
  /* Light-mode sidebar surface — 85% opacity to match dark-mode sidebar. */
  --bg-secondary:   rgba(255, 255, 255, 0.85);
  --surface:        rgba(255, 255, 255, 0.80);
  --surface-2:      rgba(238, 240, 243, 0.90);
  --surface-3:      rgba(240, 242, 244, 0.90);
  --surface-hover:  rgba(17, 24, 39, 0.03);
  --overlay:        rgba(17, 24, 39, 0.35);
  --glass:          rgba(238, 240, 243, 0.88);
  --header-bg:      rgba(238, 240, 243, 0.88);

  --border:         rgba(17, 24, 39, 0.14);
  --border-strong:  rgba(17, 24, 39, 0.28);
  --border-dim:     rgba(17, 24, 39, 0.06);

  --text:           #111827;
  --text-2:         #374151;
  --text-3:         #4B5563;
  --text-muted:     #6B7280;

  /* In light mode, obsidian ink is the primary brand / action color */
  --brand:          #111827;
  --brand-dim:      rgba(17, 24, 39, 0.06);

  --accent:         #111827;
  --accent-dim:     rgba(17, 24, 39, 0.06);
  --accent-line:    rgba(17, 24, 39, 0.20);
  --on-accent:      #EEF0F3;

  --link:           #111827;

  --green:          #15803d;
  --green-dim:      rgba(21, 128, 61, 0.10);
  --emerald:        #00C531;
  --emerald-dim:    rgba(0, 197, 49, 0.10);

  --red:            #dc2626;
  --red-dim:        rgba(220, 38, 38, 0.08);

  --yellow:         #ca8a04;
  --yellow-dim:     rgba(202, 138, 4, 0.10);
  --amber:          #d97706;
  --amber-dim:      rgba(217, 119, 6, 0.10);

  --blue:           #2563eb;
  --blue-dim:       rgba(37, 99, 235, 0.08);
  --cyan:           #0891b2;
  --cyan-dim:       rgba(8, 145, 178, 0.08);

  --purple:         #7c3aed;
  --purple-dim:     rgba(124, 58, 237, 0.08);
  --indigo:         #4f46e5;
  --indigo-dim:     rgba(79, 70, 229, 0.08);

  --orange:         #ea580c;
  --orange-dim:     rgba(234, 88, 12, 0.08);

  --pink:           #db2777;
  --pink-dim:       rgba(219, 39, 119, 0.08);

  --shadow-sm:      0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow:         0 2px 8px rgba(17, 24, 39, 0.08);
  --shadow-lg:      0 8px 24px rgba(17, 24, 39, 0.10);

  /* Light-mode glint — bright top highlight (white over the alabaster bg)
     and a soft slate drop. Subtler than dark mode because the contrast
     against the page is already lower. */
  --glint-top:    inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
  --glint-card:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(17, 24, 39, 0.06),
    inset -1px 0 0 0 rgba(17, 24, 39, 0.02);

  --nav-bg:         rgba(238, 240, 243, 0.88);
  --nav-border:     rgba(17, 24, 39, 0.14);
  --nav-brand:      #111827;
  --nav-tab:        #4B5563;
  --nav-tab-hover:  #111827;
  --nav-tab-active: #111827;
  --nav-user:       #4B5563;
  --nav-signout:    #6B7280;

  --success: var(--emerald);
  --error:   var(--red);
  --warning: var(--yellow);

  /* Light: subtle darker mist at bottom; pulse deepens slightly (see base.css).
   * Alphas bumped 2026-04-28 in proportion to dark-mode bump (~1.5×). */
  --ambient-blob-1: rgba(75, 88, 118, 0.22);
  --ambient-blob-2: rgba(95, 105, 138, 0.17);
  --ambient-blob-3: rgba(55, 72, 108, 0.14);
  --ambient-blob-4: rgba(120, 130, 160, 0.11);
}

/* ── Responsive breakpoints ─────────────────────────────────────────────────
 * CSS custom properties cannot be used in @media queries.
 * Use these literal values consistently — do NOT use other breakpoints.
 *
 *   Mobile (phones):          @media (max-width: 480px)
 *   Tablet (tablets/laptops): @media (max-width: 1024px)
 *   Desktop:                  implicit (>= 1025px, existing styles)
 * ─────────────────────────────────────────────────────────────────────────── */