/* ═══════════════════════════════════════════════
   @moozz/design-system — tokens.css
   Canonical CSS custom properties for every Moozz surface.
   This file is the single source of truth. tokens.ts and
   tailwind-preset.js mirror it; tests/lint/tokens.spec.ts fails CI
   if they drift apart.
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
    /* ── Neutrals ── */
    --black: #080808;
    --surface: #0d0d0d;
    --card: #111111;
    --card2: #131313;
    --border: #1d1d1d;
    --border2: #252525;
    --field: #141414;
    --text: #ebebeb;
    --text2: #aaaaaa;
    --muted: #666;
    --muted2: #333;

    /* ── Semantic colors ──
       --mz-error / --mz-info / --mz-success / --mz-warning are canonical.
       --urgent is a legacy alias kept so existing urgent-* Tailwind
       utilities keep resolving without a component rewrite. */
    --mz-error: #ff6b35;
    --urgent: var(--mz-error);
    --urgent-bg: rgba(255, 107, 53, 0.08);
    --mz-info: #6ab0ff;
    --info: #6ab0ff;
    --info-bg: rgba(106, 176, 255, 0.07);
    /* Folded in from new-moozz-website's --info-bg; pipeline-editor had
       no --mz-* prefixed background variant of info. */
    --mz-info-bg: rgba(106, 176, 255, 0.07);
    /* New — sourced from moozz-lab's dashboard palette
       (orchestrator/static/index.html), already proven legible in a
       dark UI. Never reuse --mz-lime / --acid for success; that pair
       is reserved for brand/CTA only. */
    --mz-success: #3fb950;
    --mz-warning: #d29922;
    --mz-modify: #ff7eb6;

    /* ── Timeline stem tints ──
       Three-color discipline: instrumental / original-vocal / AI-vocal. */
    --stem-instr: #AAFF00;
    --stem-orig-vocal: #9ad0ff;
    --stem-orig-vocal-pitch: rgba(154, 208, 255, 0.4);
    --stem-ai: #c4a0ff;

    /* ── D-score tier fills ── */
    --dscore-green: rgba(170, 255, 0, 0.12);
    --dscore-amber: rgba(255, 165, 0, 0.10);
    --dscore-red: rgba(255, 107, 53, 0.10);

    /* ── Section hue overlays (applied on top of a D-score fill) ── */
    --section-verse: rgba(100, 140, 255, 0.04);
    --section-chorus: rgba(255, 100, 140, 0.04);
    --section-bridge: rgba(140, 100, 255, 0.04);
    --section-outro: rgba(100, 200, 200, 0.04);

    /* ── D-dimension edge notch colors ── */
    --d1-meaning: #ff6b35;
    --d2-singability: #6ab0ff;
    --d3-rhyme: #c4a0ff;
    --d4-register: #9ad0ff;
    --d5-prosody: #7acc00;

    /* ── Lime — primary Moozz accent ── */
    --mz-lime: #C4FF6A;
    --mz-lime-soft: #D7FF95;
    --mz-lime-deep: #8ABF37;
    --mz-lime-ink: #1a3300;
    --mz-lime-tint: rgba(196, 255, 106, 0.14);
    --mz-lime-glow: rgba(196, 255, 106, 0.35);
    --mz-lime-aurora: rgba(196, 255, 106, 0.22);
    /* Legacy alias — existing text-acid / bg-acid / border-acid Tailwind
       utilities keep resolving through the canonical lime token. */
    --acid: var(--mz-lime);
    --acid-dim: #7acc00;
    --acid-dark: #1a3300;
    --acid-glow: rgba(170, 255, 0, 0.15);

    /* ── Backgrounds ── */
    --mz-black: #000000;
    --mz-ink: #080808;
    --mz-surface: #0d0d0d;
    --mz-card: #111217;
    --mz-card-2: #14151a;
    --mz-field: rgba(255, 255, 255, 0.03);

    /* ── Borders ── */
    --mz-border: rgba(255, 255, 255, 0.08);
    --mz-border-2: rgba(255, 255, 255, 0.12);
    --mz-border-3: rgba(255, 255, 255, 0.20);

    /* ── Foreground opacity ramp ── */
    --mz-fg: #FFFFFF;
    --mz-fg-92: rgba(255, 255, 255, 0.92);
    --mz-fg-82: rgba(255, 255, 255, 0.82);
    --mz-fg-70: rgba(255, 255, 255, 0.70);
    --mz-fg-60: rgba(255, 255, 255, 0.60);
    --mz-fg-48: rgba(255, 255, 255, 0.48);
    --mz-fg-35: rgba(255, 255, 255, 0.35);
    --mz-fg-22: rgba(255, 255, 255, 0.22);
    --mz-fg-08: rgba(255, 255, 255, 0.08);

    /* ── On-lime text ── */
    --mz-on-lime: rgba(0, 0, 0, 0.82);

    /* ── Radii ── */
    --mz-r-sm: 0.5rem;
    --mz-r-md: 1rem;
    --mz-r-lg: 1.75rem;
    --mz-r-pill: 999px;
    --mz-radius-pill: 28px;

    /* ── Shadows + glows ── */
    --mz-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
    --mz-glow-sm: 0 0 20px var(--mz-lime-glow);
    --mz-glow-md: 0 0 40px rgba(196, 255, 106, 0.28);
    --mz-glow-lg: 0 0 90px rgba(196, 255, 106, 0.18);
    --mz-elevation-4: 0 4px 12px rgba(0, 0, 0, 0.18);

    /* ── Font families ──
       --mz-font-serif ('Instrument Serif') is not loaded by the
       @import above — consumers that use it must load it themselves. */
    --mz-font-display: 'Bebas Neue', 'Impact', sans-serif;
    --mz-font-serif: 'Instrument Serif', 'Georgia', serif;
    --mz-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

    /* ── Easing + timing ── */
    --mz-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --mz-t-fast: 150ms;
    --mz-t-base: 260ms;

    /* ── Material Design 3 aliases ──
       No new color values — every M3 surface stays brand-consistent. */
    --md-sys-color-surface: var(--mz-black);
    --md-sys-color-surface-container: var(--mz-surface);
    --md-sys-color-surface-container-high: var(--mz-card);
    --md-sys-color-on-surface: var(--mz-fg-92);
    --md-sys-color-on-surface-variant: var(--mz-fg-60);
    --md-sys-color-outline: var(--mz-border-2);
    --md-sys-color-outline-variant: var(--mz-border);
    --md-sys-color-primary: var(--mz-lime);
    --md-sys-color-on-primary: var(--mz-lime-ink);
    --md-sys-color-primary-container: var(--mz-lime-tint);
    --md-sys-color-secondary: #ffb84d;
    --md-sys-color-error: var(--mz-error);
    --md-sys-color-modify: var(--mz-modify);
}