// ─────────────────────────────────────────────────────────────────────────────
// Theme:   Spectral
// File:    src/scss/_tokens.scss
//
// Single source of truth for every design decision. All component and page
// partials consume these tokens — no raw hex values outside this file.
//
// Light mode: add [data-theme="light"] overrides below :root.
// Domain colors: --domain-{slug}-{prop} for domain-aware components.
// Gradients: --gradient-spectral is the canonical brand gradient.
// ─────────────────────────────────────────────────────────────────────────────

// Inter + JetBrains Mono loaded in base.html via bunny.net CDN.

/* Scale the entire UI to 125% */
body {
  zoom: 1.25;
}

:root {

  // ── Background layers (void → elevated) ───────────────────────────────────
  // Four layers create depth without shadows. The purple tint in elevated
  // surfaces gives the void a spectral quality — not neutral gray.
  --bg-void:      #07070f;   // deepest — page backdrop
  --bg-base:      #0d1117;   // grounded dark — familiar, stable
  --bg-surface:   #161b22;   // cards, panels, sidebars
  --bg-elevated:  #1c1c2e;   // modals, dropdowns, canvas cells, code blocks
  --bg-overlay:   #21213a;   // hover states, active rows, selected items
  --bg-hover:     #2a2a42;   // lighter hover for dense lists

  // ── Borders (crystalline — translucent purple, barely there) ──────────────
  // Opacity-based so they read correctly on any surface layer.
  --border-subtle:  rgba(99, 102, 241, 0.07);   // dividers, hairlines
  --border-default: rgba(99, 102, 241, 0.14);   // card edges, panel outlines
  --border-strong:  rgba(139, 92, 246, 0.28);   // focused inputs, active states
  --border-glow:    rgba(167, 139, 250, 0.45);  // hover, selected, highlighted

  // ── Text ──────────────────────────────────────────────────────────────────
  --text-primary:   #e2e8f0;   // main content
  --text-secondary: #a8b8cc;   // labels, metadata, secondary info
  --text-muted:     #6b7fa0;   // timestamps, counts, disabled
  --text-disabled:  #3d4f68;   // truly inactive elements

  // ── Accent / brand ────────────────────────────────────────────────────────
  --color-accent:       #60a5fa;   // primary interactive — electric blue
  --color-accent-link:  #93c5fd;   // softer hyperlink blue
  --color-accent-muted: #1e40af;   // badge backgrounds, muted accent fills
  --color-success:      #3fb950;
  --color-success-bg:   #14532d;
  --color-warning:      #d29922;
  --color-warning-bg:   #7c4b08;
  --color-danger:       #f87171;
  --color-danger-critical: #ff2244;
  --color-danger-bg:    #991b1b;
  --color-neutral:      #64748b;
  --color-purple:       #a78bfa;
  --color-purple-bg:    #3b1f8a;
  --color-orange:       #f0883e;
  --color-teal:         #2dd4bf;

  // ── Spectral gradients ────────────────────────────────────────────────────
  // --gradient-spectral is the canonical brand gradient. Use it for name
  // text, hero accents, and primary CTAs. Cooler landing (lavender, not
  // fuchsia) keeps it luminous without crossing into garish.
  --gradient-spectral:    linear-gradient(90deg, #60a5fa, #818cf8, #a78bfa, #c084fc);
  --gradient-spectral-45: linear-gradient(45deg, #60a5fa, #818cf8, #a78bfa, #c084fc);
  --gradient-agent:       linear-gradient(90deg, #a78bfa, #e879f9);
  --gradient-void:        linear-gradient(180deg, #0d1117 0%, #07070f 100%);
  --gradient-surface:     linear-gradient(135deg, #161b22 0%, #1c1c2e 100%);
  --gradient-hero:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(96, 165, 250, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 50%, rgba(167, 139, 250, 0.05) 0%, transparent 70%);

  // ── Domain color system ───────────────────────────────────────────────────
  // Each domain has primary / bg / border. Composable into pills, cards,
  // chip icons, canvas cells, and any domain-scoped UI.
  --domain-code:         #60a5fa;
  --domain-code-bg:      rgba(96, 165, 250, 0.08);
  --domain-code-border:  rgba(96, 165, 250, 0.18);

  --domain-midi:         #a78bfa;
  --domain-midi-bg:      rgba(167, 139, 250, 0.08);
  --domain-midi-border:  rgba(167, 139, 250, 0.18);

  --domain-mist:         #c084fc;
  --domain-mist-bg:      rgba(192, 132, 252, 0.08);
  --domain-mist-border:  rgba(192, 132, 252, 0.18);

  --domain-generic:      #64748b;
  --domain-generic-bg:   rgba(100, 116, 139, 0.08);
  --domain-generic-border: rgba(100, 116, 139, 0.18);

  // Agent is the most saturated domain — agents are special, they should pop.
  --domain-agent:        #e879f9;
  --domain-agent-bg:     rgba(232, 121, 249, 0.08);
  --domain-agent-border: rgba(232, 121, 249, 0.18);

  // ── Activity canvas intensity palette ─────────────────────────────────────
  // Used in .prof-canvas__cell[data-intensity] and legend swatches.
  // Level 0 = void/empty; level 4 = maximum activity.
  --canvas-0: #21262d;   // empty cell — clearly distinct from #0d1117 bg-base
  --canvas-1: #1e1b4b;   // indigo shadow
  --canvas-2: #4c1d95;   // deep violet
  --canvas-3: #7c3aed;   // violet
  --canvas-4: #a855f7;   // amethyst
  --canvas-border: rgba(139, 92, 246, 0.18);

  // ── Agent / provenance tokens ─────────────────────────────────────────────
  --agent-accent:    #e879f9;   // fuchsia — intentionally hotter than domain-agent
  --agent-accent-bg: rgba(232, 121, 249, 0.10);
  // Legacy aliases
  --domain-badge-bg:     rgba(96, 165, 250, 0.08);
  --domain-badge-text:   #60a5fa;
  --domain-badge-border: rgba(96, 165, 250, 0.18);

  // ── Glow effects ──────────────────────────────────────────────────────────
  // Use on focused inputs, selected cards, active nav items, primary CTAs.
  --glow-spectral:
    0 0 0 1px rgba(139, 92, 246, 0.20),
    0 0 16px rgba(139, 92, 246, 0.12),
    0 0 32px rgba(139, 92, 246, 0.06);
  --glow-accent:
    0 0 0 1px rgba(96, 165, 250, 0.25),
    0 0 12px rgba(96, 165, 250, 0.15);
  --glow-agent:
    0 0 0 1px rgba(232, 121, 249, 0.25),
    0 0 12px rgba(232, 121, 249, 0.15);

  // ── Dimension slots (domain-agnostic data dimensions) ─────────────────────
  // Five generic dimension slots for multi-track views, radar charts,
  // insight pages, diff views. Domain plugins can remap semantics via
  // [data-domain] rules in _domain.scss.
  --dim-a:        #60a5fa;  // blue   — slot A
  --dim-a-muted:  #1e3a5f;
  --dim-b:        #3fb950;  // green  — slot B
  --dim-b-muted:  #14532d;
  --dim-c:        #a78bfa;  // violet — slot C
  --dim-c-muted:  #3b1f8a;
  --dim-d:        #f0883e;  // orange — slot D
  --dim-d-muted:  #7c3010;
  --dim-e:        #f87171;  // red    — slot E
  --dim-e-muted:  #991b1b;

  // Backward-compat MIDI aliases (deprecated — use --dim-* above)
  --dim-harmonic:         var(--dim-a);
  --dim-harmonic-muted:   var(--dim-a-muted);
  --dim-rhythmic:         var(--dim-b);
  --dim-rhythmic-muted:   var(--dim-b-muted);
  --dim-melodic:          var(--dim-c);
  --dim-melodic-muted:    var(--dim-c-muted);
  --dim-structural:       var(--dim-d);
  --dim-structural-muted: var(--dim-d-muted);
  --dim-dynamic:          var(--dim-e);
  --dim-dynamic-muted:    var(--dim-e-muted);

  // ── Track colors (8-slot palette for multi-track views) ───────────────────
  --track-0: #60a5fa;
  --track-1: #3fb950;
  --track-2: #f0883e;
  --track-3: #a78bfa;
  --track-4: #f87171;
  --track-5: #d29922;
  --track-6: #e879f9;
  --track-7: #818cf8;

  // ── Typography ────────────────────────────────────────────────────────────
  // Inter: clean, humanist sans-serif. Loaded via bunny.net in base.html.
  // JetBrains Mono: for all code, data, hashes, counts.
  --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;

  --line-height-tight:   1.25;
  --line-height-normal:  1.65;
  --line-height-relaxed: 1.8;

  // ── Spacing (8pt grid) ────────────────────────────────────────────────────
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  // ── Border radius ─────────────────────────────────────────────────────────
  --radius-sm:   3px;
  --radius-base: 6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  // ── Motion ────────────────────────────────────────────────────────────────
  --ease-out:  cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-snap: cubic-bezier(0.0, 0, 0.1, 1);   // snappy interactions

  --duration-fast:   80ms;
  --duration-base:   150ms;
  --duration-slow:   250ms;
  --duration-reveal: 400ms;

  // Legacy transition aliases
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  // ── Shadows ───────────────────────────────────────────────────────────────
  // In a dark theme, drop shadows are subtle. Prefer border-lift (--border-glow)
  // over shadows for interactive feedback.
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.7);

  // ── Z-index ladder ────────────────────────────────────────────────────────
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;

  // ── Code / terminal ───────────────────────────────────────────────────────
  --code-output-bg: #07070f;   // darker than --bg-base, matches --bg-void

}

// ── Light mode overrides ───────────────────────────────────────────────────
// Secondary target — dark is primary. Spectral gradients and domain colors
// are unchanged; backgrounds and text flip.
[data-theme="light"] {
  --bg-void:      #f4f4f8;   // cool off-white — barely perceptible tint
  --bg-base:      #ededf3;   // blue-gray ground — soft, not purple
  --bg-surface:   #ffffff;   // cards/panels white — elevated above base
  --bg-elevated:  #f8f8fb;   // slightly lifted surfaces
  --bg-overlay:   #e0e0ea;   // hover states, active rows
  --bg-hover:     #e8e8f0;   // lighter hover for dense lists

  --border-subtle:  rgba(99, 102, 241, 0.09);
  --border-default: rgba(99, 102, 241, 0.18);
  --border-strong:  rgba(99, 102, 241, 0.35);
  --border-glow:    rgba(139, 92, 246, 0.50);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-disabled:  #cbd5e1;

  --code-output-bg: #f1f5f9;

  // Activity canvas — light mode uses opaque violet tints on a slate ground
  --canvas-0: #e2e8ef;   // empty cell — visible but subtle on #f8fafc bg-base
  --canvas-1: #c4b5fd;   // violet-300
  --canvas-2: #8b5cf6;   // violet-500
  --canvas-3: #7c3aed;   // violet-600
  --canvas-4: #6d28d9;   // violet-700
  --canvas-border: rgba(99, 102, 241, 0.20);
}

// ── HTMX loading indicator ────────────────────────────────────────────────
#htmx-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-spectral);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.htmx-request #htmx-loading {
  display: block;
  opacity: 1;
}

.htmx-request.htmx-indicator { display: block; }