/* ==========================================================================
   MP-Beats — Design tokens
   "Obsidian & Ember": a mastering-studio aesthetic. Deep blue-black room tone,
   molten amber for anything that costs money or demands attention, and a cold
   mint that only ever means "this is playing right now".

   Nothing in this codebase hard-codes a colour, radius, duration or shadow.
   The admin theme editor rewrites --brand-accent / --brand-accent-2 / --brand-bg
   at runtime, and every derived token follows automatically.
   ========================================================================== */

:root {
  /* ---- Brand inputs (admin-editable at runtime) ---------------------- */
  --brand-accent: #ff8a1f;   /* ember */
  --brand-accent-2: #ff4d3d; /* flare */
  --brand-live: #56e7c4;     /* mint — reserved for "now playing" */
  --brand-bg: #08090d;

  /* ---- Surfaces ------------------------------------------------------ */
  --surface-void: var(--brand-bg);
  --surface-base: #0b0d12;
  --surface-raised: #11141b;
  --surface-overlay: #171b24;
  --surface-hover: #1d222d;
  --surface-active: #242a37;
  --surface-inverse: #f4f5f7;

  /* Translucent surfaces for glass panels — layered over artwork/backdrops */
  --glass-thin: rgb(255 255 255 / 0.04);
  --glass-medium: rgb(255 255 255 / 0.07);
  --glass-thick: rgb(18 21 28 / 0.82);
  --glass-blur: 20px;
  --glass-blur-heavy: 40px;

  /* ---- Borders ------------------------------------------------------- */
  /* The low-alpha tokens are DECORATIVE ONLY — dividers, card hairlines, the
     hint of an edge on a surface that is already distinguishable by fill.
     Composited over --surface-base they reach 1.27:1 (default) and 1.56:1
     (strong), so they can never carry WCAG 1.4.11's 3:1 requirement for a
     component whose boundary is its only affordance. */
  --border-subtle: rgb(255 255 255 / 0.06);
  --border-default: rgb(255 255 255 / 0.10);
  --border-strong: rgb(255 255 255 / 0.16);
  --border-accent: rgb(255 138 31 / 0.45);

  /* The only border token permitted to define a control's edge: inputs,
     textareas, selects, checkboxes, radios, switches. 0.36 alpha composites
     to 3.26:1 over --surface-void (the field fill) and 3.28:1 over
     --surface-base (the page behind it) — clears 1.4.11 on both sides. */
  --border-control: rgb(255 255 255 / 0.36);
  --border-control-hover: rgb(255 255 255 / 0.52);

  /* ---- Text ----------------------------------------------------------
     Every tier here carries real words, so every tier clears WCAG AA (4.5:1)
     against every surface text is ever painted on — including the darkest,
     --surface-hover #1d222d, which sits behind compact cards, active tabs and
     queue rows on hover. Ratios below are measured against --surface-hover
     (the floor) and --surface-void (the ceiling).

       primary    #f7f8fa   14.9 : 1  →  17.9 : 1
       secondary  #a8afbd    7.23: 1  →   9.03: 1
       tertiary   #8d95a5    5.29: 1  →   6.61: 1
       quiet      #838c9d    4.70: 1  →   5.88: 1   (the AA floor tier)

     A near-black palette has exactly this much room above the floor: four
     legible grey steps and no more. Anything dimmer than --text-quiet is not
     a text colour, it is a drawing colour — use --text-decorative, which is
     only ever allowed on glyphs and separators, never on words. */
  --text-primary: #f7f8fa;
  --text-secondary: #a8afbd;
  --text-tertiary: #8d95a5;
  --text-quiet: #838c9d;
  --text-decorative: #545c6b; /* dots, slashes, rules — NEVER words */
  --text-inverse: #0b0d12;
  --text-accent: var(--brand-accent);

  /* ---- Accent ramp --------------------------------------------------- */
  --accent: var(--brand-accent);
  --accent-hover: color-mix(in oklab, var(--brand-accent) 88%, white);
  --accent-press: color-mix(in oklab, var(--brand-accent) 82%, black);
  --accent-soft: color-mix(in oklab, var(--brand-accent) 16%, transparent);
  --accent-softer: color-mix(in oklab, var(--brand-accent) 8%, transparent);
  --accent-text: color-mix(in oklab, var(--brand-accent) 88%, white);
  --accent-contrast: #14100a; /* text that sits ON the accent — AA verified */

  --gradient-ember: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-2) 100%);
  --gradient-ember-soft: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand-accent) 22%, transparent) 0%,
    color-mix(in oklab, var(--brand-accent-2) 12%, transparent) 100%
  );
  --gradient-sheen: linear-gradient(
    100deg,
    transparent 20%,
    rgb(255 255 255 / 0.07) 45%,
    rgb(255 255 255 / 0.12) 50%,
    rgb(255 255 255 / 0.07) 55%,
    transparent 80%
  );
  --gradient-fade-b: linear-gradient(to bottom, transparent, var(--surface-base));

  /* ---- Semantic ------------------------------------------------------ */
  --success: #3ddc97;
  --success-soft: rgb(61 220 151 / 0.14);
  --warning: #ffc247;
  --warning-soft: rgb(255 194 71 / 0.14);
  --danger: #ff5f56;
  --danger-soft: rgb(255 95 86 / 0.14);
  --info: #56b0e7;
  --info-soft: rgb(86 176 231 / 0.14);
  --live: var(--brand-live);
  --live-soft: color-mix(in oklab, var(--brand-live) 16%, transparent);

  /* ---- Waveform ------------------------------------------------------
     The waveform is the one asset a beat site is judged on, so its colours
     are tokens rather than literals buried in a canvas routine. Unplayed bars
     sit at 0.22 alpha (≈3.4:1 on --surface-raised) so the shape reads as a
     spectrum instead of noise; the played region carries the ember ramp so
     the wave communicates state, not decoration. */
  --wave-idle: rgb(255 255 255 / 0.22);
  --wave-idle-hover: rgb(255 255 255 / 0.34);
  --wave-played-from: var(--brand-accent);
  --wave-played-to: var(--brand-accent-2);
  --wave-playhead: var(--brand-live);
  /* Written once per frame by the analyser while the track is current (0–1). */
  --wave-level: 0;

  /* ---- Typography ---------------------------------------------------- */
  /* No webfont download: SF Pro / Segoe UI Variable / Inter are already on the
     user's machine and render better than anything we could ship over the wire. */
  --font-display: "SF Pro Display", "Segoe UI Variable Display", Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "SF Pro Text", "Segoe UI Variable Text", Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Mono", Menlo, monospace;

  --font-scale: 1;

  /* Fluid type — clamp() so mobile never needs a separate scale */
  --text-2xs: calc(0.6875rem * var(--font-scale));
  --text-xs: calc(0.75rem * var(--font-scale));
  --text-sm: calc(0.8125rem * var(--font-scale));
  --text-base: calc(0.9375rem * var(--font-scale));
  --text-md: calc(1.0625rem * var(--font-scale));
  --text-lg: calc(1.25rem * var(--font-scale));
  --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --text-4xl: clamp(2.75rem, 1.8rem + 4.4vw, 5.75rem);
  --text-hero: clamp(3rem, 1.5rem + 7vw, 8.5rem);

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

  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Large display text needs negative tracking to look intentional */
  --tracking-hero: -0.045em;
  --tracking-display: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.14em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Section rhythm scales down on small screens automatically.
     Two values, not one: --section-y separates ideas, --section-gap-tight
     separates a band from its own continuation. A page that uses only one gap
     has no grouping — every section reads as equally unrelated to its
     neighbours. Use tight between sections that belong together (a card and
     its footnote, a hero and the row it introduces) and reserve the full
     --section-y for the closing CTA and the newsletter. */
  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);
  --section-gap-tight: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --content-max: 1320px;
  --content-narrow: 760px;
  --content-wide: 1600px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-scale: 1;
  --radius-xs: calc(4px * var(--radius-scale));
  --radius-sm: calc(8px * var(--radius-scale));
  --radius-md: calc(12px * var(--radius-scale));
  --radius-lg: calc(16px * var(--radius-scale));
  --radius-xl: calc(22px * var(--radius-scale));
  --radius-2xl: calc(30px * var(--radius-scale));
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Elevation ----------------------------------------------------- */
  /* Two-layer shadows: a tight contact shadow plus a wide ambient one. */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.28);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 20px rgb(0 0 0 / 0.34);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.42), 0 18px 44px rgb(0 0 0 / 0.42);
  --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.44), 0 34px 76px rgb(0 0 0 / 0.5);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --glow-accent: 0 0 0 1px var(--accent-soft), 0 8px 30px color-mix(in oklab, var(--brand-accent) 26%, transparent);
  --glow-live: 0 0 0 1px var(--live-soft), 0 6px 24px color-mix(in oklab, var(--brand-live) 24%, transparent);

  /* ---- Motion -------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
  --dur-slower: 620ms;
  --dur-cinematic: 1100ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* signature: expo-ish out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* overshoot for pop-in */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

  --transition-colors: color var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
  --transition-transform: transform var(--dur-base) var(--ease-out);

  /* ---- Layout constants --------------------------------------------- */
  /* Minimum hit target. Declared HERE, inside the base :root, so the
     `@media (pointer: coarse)` override at the bottom of this file — same
     specificity, later in source order — actually wins on touch devices.
     It previously lived in a bare :root block *after* that media query, which
     silently reset every coarse-pointer target back to 36px. */
  --tap-min: 36px;

  --header-h: 68px;
  --header-h-scrolled: 58px;
  --player-h: 84px;
  --player-h-mobile: 68px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ---- Z-index scale -------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-player: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-max: 999;
}

/* Reduced-motion users get the same design with the movement removed —
   opacity still resolves so nothing scroll-revealed stays invisible. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --dur-cinematic: 1ms;
  }
}

/* Coarse pointers get bigger hit targets across every component.
   This must remain the LAST declaration of --tap-min in the file. */
@media (pointer: coarse) {
  :root {
    --tap-min: 44px;
  }
}