/*
 * MuseHub Design Tokens
 *
 * CSS custom properties that form the foundation of the MuseHub design system.
 * All component classes consume these tokens — do not hardcode hex values in
 * components.css, layout.css, or _domain.scss.  Changing a token here cascades
 * the change across every page automatically.
 *
 * Dark theme is the default (and currently the only supported theme).
 * Future light-theme support: add a [data-theme="light"] selector block that
 * overrides the --color-* tokens defined here.
 *
 * Dimension tokens (--dim-a through --dim-e) are domain-agnostic aliases.
 * MIDI maps: a=harmonic, b=rhythmic, c=melodic, d=structural, e=dynamic.
 * Domain-specific overrides can remap them via [data-domain="<slug>"] rules
 * in _domain.scss.
 */

/* Scale the entire UI to 125% — zoom applies to all units including px,
   matching what the browser's Cmd++ zoom does at 125%. */
body {
  zoom: 1.25;
}

:root {
  /* -------------------------------------------------------------------------
   * Surface / background hierarchy (darkest → lightest)
   * --bg-base       deepest background — page backdrop
   * --bg-surface    primary card / panel surface
   * --bg-overlay    elevated / nested surface (artifact cards, code blocks)
   * --bg-hover      interactive hover state
   * ------------------------------------------------------------------------- */
  --bg-base:    #0d1117;
  --bg-surface: #161b22;
  --bg-overlay: #21262d;
  --bg-hover:   #30363d;

  /* -------------------------------------------------------------------------
   * Border
   * ------------------------------------------------------------------------- */
  --border-subtle:  #21262d;
  --border-default: #30363d;
  --border-muted:   #484f58;

  /* -------------------------------------------------------------------------
   * Text
   * ------------------------------------------------------------------------- */
  --text-primary:   #e6edf3;
  --text-secondary: #c9d1d9;
  --text-muted:     #8b949e;
  --text-disabled:  #484f58;

  /* -------------------------------------------------------------------------
   * Accent / brand
   * ------------------------------------------------------------------------- */
  --color-accent:       #4f8ef7;   /* primary interactive / CTA blue (Muse protocol) */
  --color-accent-link:  #58a6ff;   /* softer hyperlink blue */
  --color-accent-muted: #2a5fd4;   /* badge backgrounds, muted accent fills */
  --color-success:      #3fb950;
  --color-success-bg:   #238636;
  --color-warning:      #d29922;
  --color-warning-bg:   #9e6a03;
  --color-danger:       #f85149;
  --color-danger-bg:    #b91c1c;
  --color-neutral:      #8b949e;
  --color-purple:       #bc8cff;
  --color-purple-bg:    #6e40c9;
  --color-orange:       #f0883e;

  /* -------------------------------------------------------------------------
   * Domain-agnostic dimension color tokens (--dim-a … --dim-e)
   *
   * Five generic dimension slots usable by any domain plugin.
   * MIDI mapping: a=harmonic, b=rhythmic, c=melodic, d=structural, e=dynamic.
   * Code mapping:  a=syntax,   b=semantics, c=types,   d=tests,    e=docs.
   *
   * Each slot has a primary and a muted (background/badge) variant.
   * Domain-specific named aliases are set in _domain.scss under
   * [data-domain="midi"] / [data-domain="code"] / etc.
   * Used in viewers, radar charts, insight pages, and diff views.
   * ------------------------------------------------------------------------- */
  --dim-a:        #388bfd;  /* blue   — slot A */
  --dim-a-muted:  #1f4a8a;
  --dim-b:        #3fb950;  /* green  — slot B */
  --dim-b-muted:  #1a5c2a;
  --dim-c:        #bc8cff;  /* purple — slot C */
  --dim-c-muted:  #5a3e8a;
  --dim-d:        #f0883e;  /* orange — slot D */
  --dim-d-muted:  #7a3e10;
  --dim-e:        #f85149;  /* red    — slot E */
  --dim-e-muted:  #7a1a18;

  /* Backward-compat aliases for MIDI-specific consumers (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);

  /* -------------------------------------------------------------------------
   * Domain badge tokens
   * Used for the @author/slug pill shown on repo cards, repo headers,
   * and the domain browser.
   * ------------------------------------------------------------------------- */
  --domain-badge-bg:   #1c2a3a;
  --domain-badge-text: #58a6ff;
  --domain-badge-border: #2a4a6a;

  /* -------------------------------------------------------------------------
   * Agent accent token
   * Used for the "agent" badge in activity feeds and event streams,
   * and for agent-authored commit indicators.
   * ------------------------------------------------------------------------- */
  --agent-accent:    #a78bfa;  /* violet — distinct from human-blue accent */
  --agent-accent-bg: #2d1f5e;

  /* -------------------------------------------------------------------------
   * Track colors — 8 distinct palette for multi-track views
   * (piano roll lanes, arrangement matrix, contributor graphs)
   * ------------------------------------------------------------------------- */
  --track-0: #388bfd;
  --track-1: #3fb950;
  --track-2: #f0883e;
  --track-3: #bc8cff;
  --track-4: #f85149;
  --track-5: #d29922;
  --track-6: #39d353;
  --track-7: #58a6ff;

  /* -------------------------------------------------------------------------
   * Spacing scale (4-point grid)
   * ------------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* -------------------------------------------------------------------------
   * Typography
   * System font stack — no web font dependency; matches the Muse protocol
   * site aesthetic of clean, native-feeling developer tooling.
   * JetBrains Mono is loaded via bunny.net for monospace content.
   * ------------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

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

  /* -------------------------------------------------------------------------
   * Border-radius scale
   * ------------------------------------------------------------------------- */
  --radius-sm:   3px;
  --radius-base: 6px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
   * Shadows
   * ------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.6);

  /* -------------------------------------------------------------------------
   * Animation / transition
   * ------------------------------------------------------------------------- */
  --transition-fast:   0.1s ease;
  --transition-base:   0.15s ease;
  --transition-slow:   0.25s ease;

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

  /* -------------------------------------------------------------------------
   * Gradient accents — Muse protocol design language
   * gradient-accent: title/wordmark gradient (blue → violet → purple)
   * gradient-hero:   subtle radial glow used in hero / banner areas
   * ------------------------------------------------------------------------- */
  --gradient-accent: linear-gradient(90deg, #6ea8fe 0%, #a78bfa 50%, #c084fc 100%);
  --gradient-hero:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(79, 142, 247, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 50%, rgba(188, 140, 255, 0.06) 0%, transparent 70%);

  /* -------------------------------------------------------------------------
   * Code / terminal output background
   * Darker than --bg-base to distinguish rendered output blocks from
   * editable code areas.
   * ------------------------------------------------------------------------- */
  --code-output-bg: #0a0e14;
}

/* ── HTMX loading indicator ─────────────────────────────────────────────────
   Top-of-page progress bar shown while any HTMX request is in flight.
   Positioned in base.html as #htmx-loading. */
#htmx-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  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; }