/* ============================================================
   ZillaTrax v6 — Design Tokens (additive layer over style-v2)
   ============================================================

   Loaded AFTER style-v2.css to add tokens for:
   - Motion / easing
   - Elevation (4-tier shadow scale)
   - Z-index scale
   - Density (compact / comfortable / spacious)
   - Layout rails (left rail, right rail, top bar, status bar)
   - Ableton/Bitwig-inspired professional DAW surface palette

   Existing tokens from style-v2.css (--surface-*, --accent-*,
   --track-*, --space-*, --text-*, --radius-*) remain authoritative.
   Anything here that overlaps deliberately refines the v5 value.
*/

@layer v6-tokens {
  :root {
    /* ============================================================
       Motion
       ============================================================ */
    --ease-linear: linear;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 50ms;
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 260ms;
    --duration-slower: 420ms;

    /* Composed motion shortcuts */
    --motion-pop: transform var(--duration-base) var(--ease-spring),
                  opacity var(--duration-fast) var(--ease-out-quart);
    --motion-fade: opacity var(--duration-base) var(--ease-out-quart);
    --motion-slide: transform var(--duration-base) var(--ease-out-expo),
                    opacity var(--duration-fast) var(--ease-out-quart);

    /* ============================================================
       Elevation (4-tier shadow + glow scale)
       Layered for OLED-friendly dark surfaces. Pair with
       --surface-* background for proper z-stacking.
       ============================================================ */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.70), 0 8px 24px rgba(0, 0, 0, 0.45);

    --glow-accent: 0 0 24px rgba(139, 92, 246, 0.30);
    --glow-success: 0 0 18px rgba(34, 197, 94, 0.28);
    --glow-danger: 0 0 18px rgba(239, 68, 68, 0.28);

    /* Inset rings (for raised controls + focus) */
    --ring-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ring-focus: 0 0 0 2px var(--surface-200), 0 0 0 4px var(--accent-primary);

    /* ============================================================
       Z-index scale (single source of truth — no magic numbers)
       ============================================================ */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 800;
    --z-modal: 900;
    --z-popover: 1000;
    --z-tooltip: 1100;
    --z-toast: 1200;
    --z-max: 9999;

    /* ============================================================
       Density (use to override row heights in a section)
       ============================================================ */
    --row-h-compact: 22px;
    --row-h-default: 28px;
    --row-h-comfortable: 36px;

    --control-h-sm: 24px;
    --control-h-md: 30px;
    --control-h-lg: 36px;

    /* ============================================================
       v6 Layout — three-pane DAW shell
       ============================================================ */
    --topbar-h: 56px;
    --statusbar-h: 26px;
    --rail-left-w: 280px;
    --rail-left-collapsed: 44px;
    --rail-right-w: 320px;
    --rail-right-collapsed: 0px;
    --pane-handle-w: 4px;

    /* ============================================================
       Surface refinement — slightly more OLED-friendly than v5
       (does not override v5 surfaces; provides v6-specific aliases)
       ============================================================ */
    --v6-bg: var(--surface-100);
    --v6-panel: var(--surface-300);
    --v6-panel-raised: var(--surface-400);
    --v6-panel-hover: var(--surface-500);
    --v6-panel-active: var(--surface-600);

    --v6-border-faint: rgba(255, 255, 255, 0.04);
    --v6-border: rgba(255, 255, 255, 0.08);
    --v6-border-strong: rgba(255, 255, 255, 0.14);

    /* Brand accent gradients (used sparingly on key CTAs) */
    --grad-accent: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
    --grad-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --grad-warn: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    /* ============================================================
       Type scale (docs/visual-spec.md §1)
       Inter everywhere; mono ONLY for readouts (bar:beat, BPM, key, dB).
       ============================================================ */
    --type-caption: 12px;   /* section labels, status-bar labels, hints */
    --type-body: 13px;      /* every control label, menu, popover, input */
    --type-title: 14px;     /* song name, popover headings, modal titles */
    --type-readout: 12px;   /* mono + tabular-nums; readouts only */

    /* ============================================================
       Row heights (docs/visual-spec.md §2)
       Spacing rhythm 4/8/12/16 is --space-1..4 in style-v2.css.
       ============================================================ */
    --v6-app-bar-h: 56px;   /* app-bar.css already reads this with a fallback */
    --transport-h: 44px;    /* row 1: Play · Stop · Loop · meter · pill · tempo · key · vol */
    --ai-row-h: 40px;       /* row 2: Pattern|Song · Create · Versions · Export · ⋯ */
    --section-strip-h: 28px;

    /* ============================================================
       Shape
       ============================================================ */
    --radius-pill: 999px;

    /* ============================================================
       Colour roles (docs/visual-spec.md §3)

       SECTIONS OWN THE RAINBOW. These eleven are generated from
       src/config/sectionTypes.js and MUST stay in lockstep with it —
       tests/unit/styles/tokens.test.js fails if they drift. The canvas
       arranger reads the hex from the JS table (it cannot resolve a custom
       property per clip); the DOM surfaces read these.
       ============================================================ */
    --color-section-intro: #0284c7;
    --color-section-verse: #2563eb;
    --color-section-pre-chorus: #4f46e5;
    --color-section-chorus: #db2777;
    --color-section-bridge: #ea580c;
    --color-section-breakdown: #c026d3;
    --color-section-solo: #059669;
    --color-section-interlude: #0d9488;
    --color-section-outro: #64748b;
    --color-section-coda: #a16207;
    --color-section-other: #6b6b78;

    /* The AI is purple, and only the AI (flat fallback for --grad-accent). */
    --color-create: var(--accent-primary, #8b5cf6);
    /* Transport is a traffic light: green plays, amber pauses, red destroys. */
    --color-transport-play: var(--accent-success, #22c55e);
    --color-transport-pause: var(--accent-warning, #f59e0b);
    --color-danger: var(--accent-danger, #ef4444);
    --playhead-glow: 0 0 8px var(--color-transport-play);

    /* Arranger canvas palette — read ONCE at attach by SongTimeline (and again
       on a body[data-theme]/[data-contrast] mutation), never per render. The
       lane background was a hardcoded #1f2937: a BLUE grey that fought every
       section hue drawn on it.

       These :root copies are the PRE-BODY fallback only (a read before
       <body> exists). The values the canvas actually uses are declared on
       `body` below — see the comment there for why. */
    --arranger-lane: var(--surface-400, #1f1f23);
    --arranger-ruler: var(--surface-200, #111113);
    --arranger-grid: rgba(255, 255, 255, 0.06);
    --arranger-grid-strong: rgba(255, 255, 255, 0.14);
    --arranger-ruler-text: var(--text-secondary, #a1a1aa);

    /* ============================================================
       Icon sizing scale
       ============================================================ */
    --icon-xs: 12px;
    --icon-sm: 14px;
    --icon-md: 16px;
    --icon-lg: 20px;
    --icon-xl: 24px;
    --icon-2xl: 32px;
  }

  /* ============================================================
     Arranger canvas palette — DECLARED ON <body>, deliberately.

     Every theme swap in this app is scoped to the body element:
     `body[data-theme="light"]` (polish.css) redefines --surface-200/-400 and
     --text-secondary, and `body[data-contrast="high|standard|dim"]` redefines
     --text-secondary/--text-muted. Custom properties set on <body> do NOT
     cascade up to <html>, so a palette read from document.documentElement can
     only ever see the dark values.

     Declaring on :root alone is not enough either, and for a subtler reason: a
     custom property's computed value is its specified value with every var()
     ALREADY substituted. `:root { --arranger-lane: var(--surface-400) }`
     substitutes --surface-400 as seen at :root — body then inherits that
     finished string, not a live reference. Re-declaring here makes the
     substitution happen on the element that actually carries data-theme.

     SongTimeline.readPalette() therefore reads document.body. Keep the two
     halves together: move this block and the canvas goes dark again in Light.
     ============================================================ */
  body {
    --arranger-lane: var(--surface-400, #1f1f23);
    --arranger-ruler: var(--surface-200, #111113);
    --arranger-ruler-text: var(--text-secondary, #a1a1aa);
  }

  /* The grid lines are literal alphas, not derived: white-on-dark is invisible
     on a light lane, so Light flips them to a dark alpha of the same weight.

     TODO (plan item 7.1, "one visual system"): the rest of the arranger's
     light-theme pass — the selection ring is `#ffffff` in every theme
     (SongTimeline.PALETTE_FALLBACK.clipSelected, deliberately tokenless
     because it must read against all eleven section hues) and the section
     fills are tuned for a dark lane. Both are legible on light, neither is
     tuned for it. */
  body[data-theme="light"] {
    --arranger-grid: rgba(15, 23, 42, 0.08);
    --arranger-grid-strong: rgba(15, 23, 42, 0.18);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-instant: 0ms;
      --duration-fast: 0ms;
      --duration-base: 0ms;
      --duration-slow: 0ms;
      --duration-slower: 0ms;
    }
  }
}

/* ============================================================
   Icon helper — works for both inline <svg> and sprite <use>.
   The .icon class is reused by emoji <span class="icon"> wrappers
   in legacy markup, so we keep its width/height defined here
   so SVG and emoji render at the same size.
   ============================================================ */
@layer v6-components {
  .v6-icon {
    display: inline-block;
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
    vertical-align: -2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .v6-icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
  .v6-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  .v6-icon--md { width: var(--icon-md); height: var(--icon-md); }
  .v6-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
  .v6-icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

  /* Filled variant — for shapes that need fill rather than stroke (e.g. play triangle) */
  .v6-icon--filled {
    fill: currentColor;
    stroke: none;
  }

  /* Spin animation for loading states */
  @keyframes v6-icon-spin {
    to { transform: rotate(360deg); }
  }
  .v6-icon--spin {
    animation: v6-icon-spin 1s linear infinite;
  }
}