/* ============================================================
   KikoMix · Design Tokens — Material You (M3) dark scheme
   Fuses Material Design 3 tonal color with Spotify's player
   clarity, keeping KikoMix's dark identity + signature orange
   brand accent.

   Vanilla CSS. No dependencies. Mobile-first. Self-hosted Inter
   (ships with the app — zero external requests).

   Conventions
   - Surfaces use M3 tonal steps (container-lowest → highest),
     never flat grays.
   - Primary is the signature brand orange (#FF8000).
   - Technique accents are muted for dark mode and reserved for
     their features only — never for general UI chrome.
   - State layers use color-mix() with --state-hover/--state-pressed.
   - Elevation 0–3 = tonal raise + soft shadow (M3 dark has no
     heavy shadows).
   ============================================================ */

/* Self-hosted Inter variable font (OFL license, latin subset).
   Ships with the app in assets/fonts — zero external requests. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Self-hosted display font (see @font-face above) ---------- */
  --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, system-ui, sans-serif;
  /* ---------- M3 tonal surfaces (dark) ---------- */
  --surface: #0e0e12;                  /* app background */
  --surface-container-lowest: #08080b; /* deepest recess */
  --surface-container-low: #121217;    /* cards, list rows */
  --surface-container: #17171d;        /* tab bar, sheets */
  --surface-container-high: #1e1e25;   /* search bar, controls */
  --surface-container-highest: #27272f;/* inputs, slider tracks */
  --on-surface: #f1efe8;               /* primary text */
  --text: var(--on-surface);           /* legacy alias: primary text */
  --on-surface-variant: #a9a49a;       /* secondary text (warm gray) */
  --outline: #8f887a;                  /* strong borders */
  --outline-variant: rgba(241, 239, 232, .09); /* hairlines */

  /* ---------- Primary: signature KikoMix orange ----------
     The single brand accent. Technique accents are reserved for
     their features only (see below). */
  --primary: #FF8000;
  --on-primary: #160b00;
  --primary-container: #3a1e00;        /* dark tonal orange */
  --on-primary-container: #ffb163;     /* light orange text on dark */

  /* ---------- Brand accent (user-selectable) ----------
     Signature orange (#FF8000) is the brand default; alternate blue
     (#009FFF) is offered in the Sources → Brand picker, which sets this
     variable live on :root. Tints chrome around brand artwork (rings,
     glows, selected states) — never the marks themselves. */
  --brand-accent: #FF8000;

  /* ---------- Secondary: muted slate ---------- */
  --secondary: #9aa4b8;
  --on-secondary: #12161d;
  --secondary-container: #262c37;
  --on-secondary-container: #cfd7e4;

  /* ---------- Error ---------- */
  --error: #ffb4ab;
  --on-error: #1c0505;
  --error-container: #5c1512;
  --on-error-container: #ffdad6;

  /* ---------- Technique accents (muted for dark mode) ----------
     Reserved for their features only: Tri-Beam, Solar Flare,
     Dodon Ray, Multi-Form, Four Witches. */
  --accent-tribeam: #d95359;    /* crimson */
  --accent-solar: #e3b81e;      /* solar yellow */
  --accent-dodon: #6ea8f2;      /* electric blue */
  --accent-multiform: #ab90e8;  /* violet */
  --accent-witches: #4fc3b3;    /* teal */

  /* ---------- Source brand colors (kept refined) ---------- */
  --spotify: #1db954;
  --apple: #fa2d48;
  --youtube: #ff0000;
  --soundcloud: #ff5500;
  --local: #a78bfa;

  /* ---------- M3 shape scale ---------- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* ---------- M3 type scale (system stack = honest Roboto) ---------- */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ts-display: 3.5625rem;   /* 57 — display large */
  --ts-headline: 2rem;        /* 32 — headline large */
  --ts-title-lg: 1.375rem;   /* 22 — title large */
  --ts-title-md: 1rem;        /* 16 — title medium */
  --ts-title-sm: .875rem;     /* 14 — title small */
  --ts-body-lg: 1rem;         /* 16 — body large */
  --ts-body-md: .875rem;      /* 14 — body medium */
  --ts-body-sm: .75rem;       /* 12 — body small */
  --ts-label-lg: .875rem;     /* 14 — label large */
  --ts-label-md: .75rem;      /* 12 — label medium */
  --ts-label-sm: .6875rem;    /* 11 — label small */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- M3 state-layer opacities ----------
     Usage: color-mix(in srgb, <fg> var(--state-hover), <bg>) */
  --state-hover: 8%;
  --state-pressed: 12%;
  --state-focus: 12%;
  --state-drag: 16%;

  /* ---------- Elevation 0–3: tonal raise + soft shadow ---------- */
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(0, 0, 0, .4);
  --elevation-2: 0 2px 6px 1px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --elevation-3: 0 4px 12px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .35);

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

  /* ---------- Layout ---------- */
  --app-max: 720px;        /* main content column */
  --nav-rail-w: 80px;      /* navigation rail width (>=600px) */
  --tabbar-height: 80px;   /* M3 navigation bar height */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: .15s;
  --dur-med: .3s;
  --dur-slow: 6s;

  /* ============================================================
     Legacy aliases — kept so every existing selector keeps working.
     New code should use the M3 tokens above.
     ============================================================ */
  --bg: var(--surface);
  --bg2: var(--surface-container-low);
  --card: var(--surface-container-low);
  --card-2: var(--surface-container);
  --line: var(--outline-variant);
  --line-strong: rgba(241, 239, 232, .16);
  --gold: var(--primary);
  --gold-soft: var(--on-primary-container);
  --crimson: var(--accent-tribeam);
  --solar: var(--accent-solar);
  --electric: var(--accent-dodon);
  --violet: var(--accent-multiform);
  --teal: var(--accent-witches);
  --muted: var(--on-surface-variant);
  --faint: #6f6a60;
  --radius: var(--shape-md);
  --radius-sm: var(--shape-sm);
  --radius-lg: var(--shape-lg);
  --radius-pill: var(--shape-full);
  --fs-hero: var(--ts-headline);
  --fs-title: var(--ts-title-lg);
  --fs-body: var(--ts-body-lg);
  --fs-small: var(--ts-body-md);
  --fs-tiny: var(--ts-body-sm);
  --shadow-card: var(--elevation-1);
  --shadow-pop: var(--elevation-3);
  --shadow-gold: 0 2px 12px rgba(255, 128, 0, .25);
  --shadow-crimson: 0 2px 12px rgba(217, 83, 89, .25);
  --shadow-electric: 0 2px 12px rgba(110, 168, 242, .25);
}

/* ============================================================
   Keyframes — decorative only. All are gentle; none strobe.
   Solar Flare's pulse lives in js/solarflare.js (4s gentle pulse,
   never a strobe) and is NOT duplicated here.
   ============================================================ */

/* Subtle breathing on accents — used sparingly on decorative marks. */
@keyframes beamPulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* Slow horizontal drift for the decorative waveform layer. */
@keyframes waveDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Gentle glow swell for decorative surfaces.
   Keep amplitude small — never a full flash. */
@keyframes glowPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}

/* Generic continuous rotation (spinners, dials). */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Rise-and-fade for toast / sheet entry. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Soft fade for overlays / modals. */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}