/* ==========================================================================
   TOKENS — generated to mirror the Figma file
   Music — Licensed Creator-Music Platform
   https://www.figma.com/design/aHVzExbLPEP5DP2N3oHzKE

   Structure mirrors Figma exactly:
     :root            → Primitives collection (raw palette, 1 mode)
     [data-theme=…]   → Theme collection (semantic, 5 modes)

   Semantic tokens only ever reference primitives via var(). Nothing in this
   file hard-codes a hex outside the primitive block, so retuning the palette
   retunes all five themes at once — same guarantee the Figma aliases give.

   Token names are identical to the Figma variable code syntax, so a value
   copied out of Dev Mode pastes straight into this codebase.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PRIMITIVES — never use these directly in component CSS.
   Reach for a semantic token instead, or the theme switch will not reach you.
   -------------------------------------------------------------------------- */
:root {
  --neutral-0: #ffffff;
  --neutral-25: #fcfcfd;
  --neutral-50: #f8f9fb;
  --neutral-100: #f1f3f7;
  --neutral-200: #e4e7ee;
  --neutral-300: #cfd4e0;
  --neutral-400: #9aa1b4;
  --neutral-500: #6e7688;
  --neutral-600: #4e5566;
  --neutral-700: #363c4b;
  --neutral-800: #232836;
  --neutral-850: #1a1e29;
  --neutral-900: #14171f;
  --neutral-950: #0e1016;
  --neutral-1000: #08090d;

  --violet-50: #f3efff;
  --violet-100: #e6dcff;
  --violet-200: #ccb9ff;
  --violet-300: #b095ff;
  --violet-400: #9573ff;
  --violet-500: #7c5cff;
  --violet-600: #6845ee;
  --violet-700: #5434c9;
  --violet-800: #40279b;
  --violet-900: #2b1a69;
  --violet-950: #1c1145;

  --cyan-300: #7de8f7;
  --cyan-400: #4cdbee;
  --cyan-500: #22d3ee;
  --cyan-600: #0bb2cc;

  --green-50: #ecfdf3;
  --green-100: #d1fadf;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-800: #125c31;
  --green-900: #0b3d22;

  --amber-50: #fffaeb;
  --amber-100: #fef0c7;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-800: #7a4a08;
  --amber-900: #4a2c05;

  --red-50: #fef3f2;
  --red-100: #fee4e2;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-800: #7a1a1a;
  --red-900: #4c1010;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-800: #1b3f8f;
  --blue-900: #12275c;

  /* Warm ramp for the Studio theme. Lower blue content is easier on the eye
     across a long moderation session than a cool grey of equal value. */
  --sepia-50: #faf7f2;
  --sepia-100: #f3ede3;
  --sepia-200: #e6dccc;
  --sepia-300: #cbbea8;
  --sepia-400: #9e9078;
  --sepia-500: #776b57;
  --sepia-600: #574e3f;
  --sepia-700: #3d372d;
  --sepia-800: #2c2721;
  --sepia-900: #1f1b16;
  --sepia-950: #15120e;


  --teal-50: #effcf9;  --teal-100: #d3f5ee; --teal-200: #a6ebdd;
  --teal-300: #6fdcc8; --teal-400: #3fc7af; --teal-500: #17ae97;
  --teal-600: #0e8c7a; --teal-700: #0b6d5f; --teal-800: #094e45;
  --teal-900: #06332d; --teal-950: #03211d;

  --rose-50: #fff0f4;  --rose-100: #ffdde6; --rose-200: #ffbacd;
  --rose-300: #ff8fad; --rose-400: #fb6389; --rose-500: #ee3a68;
  --rose-600: #d01f4f; --rose-700: #a8153e; --rose-800: #7a0f2d;
  --rose-900: #520a1e; --rose-950: #340613;

  /* High Contrast anchors, kept out of the neutral ramp so the accessible
     theme cannot drift when neutrals are tuned. */
  --hc-black: #000000;
  --hc-white: #ffffff;
  --hc-accent: #b49cff;
  --hc-danger: #ff8a85;
  --hc-success: #5ce08d;
  --hc-warning: #ffc94d;

  /* ---------------------------------------------------------------- scale
     Spacing, radius and type do not vary by theme. Naming is by step rather
     than by pixel value so the scale can be retuned without every name
     becoming a lie. */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Inter rather than Geist: Geist is installed locally for Figma but is not
     served as a webfont, so browsers fell back to Arial and the app stopped
     matching the design file. Inter exists in both Figma and Google Fonts, so
     design and code now render the same typeface.
     Note for Figma work: Inter's style string is "Semi Bold" WITH a space,
     unlike Geist's "SemiBold". */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;

  /* Dark themes take most of their depth from surface steps rather than
     shadow — heavy shadow on a near-black canvas reads as smudge, not lift. */
  --elevation-1: 0 1px 2px rgb(0 0 0 / 6%), 0 1px 0 rgb(0 0 0 / 4%);
  --elevation-2: 0 2px 6px -1px rgb(0 0 0 / 10%), 0 1px 0 rgb(0 0 0 / 5%);
  --elevation-3: 0 6px 16px -4px rgb(0 0 0 / 14%), 0 2px 0 rgb(0 0 0 / 6%);
  --elevation-4: 0 14px 32px -8px rgb(0 0 0 / 20%), 0 4px 0 rgb(0 0 0 / 8%);
  --elevation-overlay: 0 24px 56px -12px rgb(0 0 0 / 28%), 0 6px 0 rgb(0 0 0 / 10%);

  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   AXIS 2 — BRAND
   Mirrors the Figma "Brand" collection. Selected with [data-brand] on <html>,
   entirely independently of [data-theme]. Appearance decides WHICH ramp step
   each role uses; Brand decides WHICH HUE the ramp is. The two compose, so
   Dark+Teal and Light+Teal are both reachable without defining either.
   ========================================================================== */
:root,
[data-brand="violet"] {
  --brand-50: var(--violet-50);   --brand-100: var(--violet-100);
  --brand-200: var(--violet-200); --brand-300: var(--violet-300);
  --brand-400: var(--violet-400); --brand-500: var(--violet-500);
  --brand-600: var(--violet-600); --brand-700: var(--violet-700);
  --brand-800: var(--violet-800); --brand-900: var(--violet-900);
  --brand-950: var(--violet-950);
}

[data-brand="amber"] {
  --brand-50: var(--amber-50);   --brand-100: var(--amber-100);
  --brand-200: var(--amber-300); --brand-300: var(--amber-300);
  --brand-400: var(--amber-400); --brand-500: var(--amber-500);
  --brand-600: var(--amber-600); --brand-700: var(--amber-600);
  --brand-800: var(--amber-800); --brand-900: var(--amber-900);
  --brand-950: var(--amber-900);
}

[data-brand="teal"] {
  --brand-50: var(--teal-50);   --brand-100: var(--teal-100);
  --brand-200: var(--teal-200); --brand-300: var(--teal-300);
  --brand-400: var(--teal-400); --brand-500: var(--teal-500);
  --brand-600: var(--teal-600); --brand-700: var(--teal-700);
  --brand-800: var(--teal-800); --brand-900: var(--teal-900);
  --brand-950: var(--teal-950);
}

[data-brand="rose"] {
  --brand-50: var(--rose-50);   --brand-100: var(--rose-100);
  --brand-200: var(--rose-200); --brand-300: var(--rose-300);
  --brand-400: var(--rose-400); --brand-500: var(--rose-500);
  --brand-600: var(--rose-600); --brand-700: var(--rose-700);
  --brand-800: var(--rose-800); --brand-900: var(--rose-900);
  --brand-950: var(--rose-950);
}

/* ==========================================================================
   AXIS 1 — APPEARANCE
   ========================================================================== */


/* -------------------------------------------------------------- LIGHT ---- */
[data-theme="light"] {
  --surface-canvas: var(--neutral-50);
  --surface-raised: var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-hover: var(--neutral-100);
  --surface-active: var(--neutral-200);

  --content-primary: var(--neutral-900);
  --content-secondary: var(--neutral-500);
  --content-tertiary: var(--neutral-400);
  --content-inverse: var(--neutral-0);
  --content-on-accent: var(--neutral-0);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--brand-500);

  --accent-default: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-pressed: var(--brand-700);
  --accent-subtle: var(--brand-50);
  --accent-content: var(--brand-700);

  --status-success: var(--green-600);
  --status-success-subtle: var(--green-50);
  --status-success-content: var(--green-800);
  --status-warning: var(--amber-600);
  --status-warning-subtle: var(--amber-50);
  --status-warning-content: var(--amber-800);
  --status-danger: var(--red-600);
  --status-danger-subtle: var(--red-50);
  --status-danger-content: var(--red-800);
  --status-info: var(--blue-600);
  --status-info-subtle: var(--blue-50);
  --status-info-content: var(--blue-800);

  --secondary-default: var(--brand-200);
  --secondary-content: var(--brand-800);

  --viz-wave-played: var(--brand-500);
  --viz-wave-remaining: var(--neutral-300);
  --viz-wave-selection: var(--brand-100);

  color-scheme: light;
}

/* --------------------------------------------------------------- DARK ---- */
[data-theme="dark"] {
  --surface-canvas: var(--neutral-950);
  --surface-raised: var(--neutral-900);
  --surface-overlay: var(--neutral-850);
  --surface-sunken: var(--neutral-1000);
  --surface-hover: var(--neutral-850);
  --surface-active: var(--neutral-800);

  --content-primary: var(--neutral-50);
  --content-secondary: var(--neutral-400);
  --content-tertiary: var(--neutral-500);
  --content-inverse: var(--neutral-950);
  --content-on-accent: var(--neutral-0);

  --border-subtle: var(--neutral-850);
  --border-default: var(--neutral-800);
  --border-strong: var(--neutral-700);
  --border-focus: var(--brand-400);

  --accent-default: var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-pressed: var(--brand-600);
  --accent-subtle: var(--brand-950);
  --accent-content: var(--brand-300);

  --status-success: var(--green-500);
  --status-success-subtle: var(--green-900);
  --status-success-content: var(--green-400);
  --status-warning: var(--amber-500);
  --status-warning-subtle: var(--amber-900);
  --status-warning-content: var(--amber-300);
  --status-danger: var(--red-500);
  --status-danger-subtle: var(--red-900);
  --status-danger-content: var(--red-300);
  --status-info: var(--blue-500);
  --status-info-subtle: var(--blue-900);
  --status-info-content: var(--blue-300);

  --secondary-default: var(--brand-800);
  --secondary-content: var(--brand-200);

  --viz-wave-played: var(--brand-400);
  --viz-wave-remaining: var(--neutral-700);
  --viz-wave-selection: var(--brand-900);

  color-scheme: dark;
}

/* ----------------------------------------------------------- MIDNIGHT ---- */
/* Deeper than Dark for OLED displays and low-light rooms. */
[data-theme="midnight"] {
  --surface-canvas: var(--neutral-1000);
  --surface-raised: var(--neutral-950);
  --surface-overlay: var(--neutral-900);
  --surface-sunken: var(--neutral-1000);
  --surface-hover: var(--neutral-900);
  --surface-active: var(--neutral-850);

  --content-primary: var(--neutral-25);
  --content-secondary: var(--neutral-400);
  --content-tertiary: var(--neutral-500);
  --content-inverse: var(--neutral-1000);
  --content-on-accent: var(--neutral-0);

  --border-subtle: var(--neutral-900);
  --border-default: var(--neutral-850);
  --border-strong: var(--neutral-800);
  --border-focus: var(--brand-400);

  --accent-default: var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-pressed: var(--brand-600);
  --accent-subtle: var(--brand-950);
  --accent-content: var(--brand-300);

  --status-success: var(--green-500);
  --status-success-subtle: var(--green-900);
  --status-success-content: var(--green-400);
  --status-warning: var(--amber-500);
  --status-warning-subtle: var(--amber-900);
  --status-warning-content: var(--amber-300);
  --status-danger: var(--red-500);
  --status-danger-subtle: var(--red-900);
  --status-danger-content: var(--red-300);
  --status-info: var(--blue-500);
  --status-info-subtle: var(--blue-900);
  --status-info-content: var(--blue-300);

  --viz-wave-played: var(--brand-400);
  --viz-wave-remaining: var(--neutral-800);
  --viz-wave-selection: var(--brand-900);

  color-scheme: dark;
}

/* ---------------------------------------------------------- STUDIO ------- */
/* Retained for anyone who saved it, but it is no longer a distinct concept:
   Studio was "warm dark surfaces + amber accent", which coupled two choices
   that are now separate axes. Prefer [data-theme="dark"][data-brand="amber"]. */
[data-theme="studio"] {
  --surface-canvas: var(--sepia-950);
  --surface-raised: var(--sepia-900);
  --surface-overlay: var(--sepia-800);
  --surface-sunken: var(--sepia-950);
  --surface-hover: var(--sepia-800);
  --surface-active: var(--sepia-700);
  --content-primary: var(--sepia-100);
  --content-secondary: var(--sepia-300);
  --content-tertiary: var(--sepia-400);
  --content-inverse: var(--sepia-950);
  --content-on-accent: var(--neutral-0);
  --border-subtle: var(--sepia-800);
  --border-default: var(--sepia-700);
  --border-strong: var(--sepia-600);
  --border-focus: var(--brand-400);
  --accent-default: var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-pressed: var(--brand-600);
  --accent-subtle: var(--sepia-800);
  --accent-content: var(--brand-300);
  --status-success: var(--green-500);
  --status-success-subtle: var(--sepia-800);
  --status-success-content: var(--green-400);
  --status-warning: var(--amber-400);
  --status-warning-subtle: var(--sepia-800);
  --status-warning-content: var(--amber-300);
  --status-danger: var(--red-400);
  --status-danger-subtle: var(--sepia-800);
  --status-danger-content: var(--red-300);
  --status-info: var(--blue-400);
  --status-info-subtle: var(--sepia-800);
  --status-info-content: var(--blue-300);
  --viz-wave-played: var(--brand-400);
  --viz-wave-remaining: var(--sepia-700);
  --viz-wave-selection: var(--sepia-800);
  color-scheme: dark;
}

/* ------------------------------------------------------ HIGH CONTRAST ---- */
/* Maximum separation. Meets the accessibility obligation an enterprise tool
   carries, and is the correct default for anyone who has asked their OS for
   more contrast. */
[data-theme="contrast"] {
  --surface-canvas: var(--hc-black);
  --surface-raised: var(--neutral-1000);
  --surface-overlay: var(--neutral-950);
  --surface-sunken: var(--hc-black);
  --surface-hover: var(--neutral-900);
  --surface-active: var(--neutral-800);

  --content-primary: var(--hc-white);
  --content-secondary: var(--neutral-200);
  --content-tertiary: var(--neutral-300);
  --content-inverse: var(--hc-black);
  --content-on-accent: var(--hc-black);

  --border-subtle: var(--neutral-700);
  --border-default: var(--neutral-400);
  --border-strong: var(--hc-white);
  --border-focus: var(--hc-warning);

  /* Deliberately NOT brand-driven: an accessible theme must not inherit a
     hue whose contrast has not been checked. */
  --accent-default: var(--hc-accent);
  --accent-hover: var(--violet-300);
  --accent-pressed: var(--violet-400);
  --accent-subtle: var(--neutral-900);
  --accent-content: var(--hc-accent);

  --status-success: var(--hc-success);
  --status-success-subtle: var(--neutral-900);
  --status-success-content: var(--hc-success);
  --status-warning: var(--hc-warning);
  --status-warning-subtle: var(--neutral-900);
  --status-warning-content: var(--hc-warning);
  --status-danger: var(--hc-danger);
  --status-danger-subtle: var(--neutral-900);
  --status-danger-content: var(--hc-danger);
  --status-info: var(--blue-300);
  --status-info-subtle: var(--neutral-900);
  --status-info-content: var(--blue-300);

  --viz-wave-played: var(--hc-accent);
  --viz-wave-remaining: var(--neutral-500);
  --viz-wave-selection: var(--neutral-800);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Default theme resolution.

   A stored user choice wins, applied as data-theme on <html> before first
   paint. These rules only decide what an unset visitor sees, so the OS
   preference is honoured without ever overriding an explicit choice.
   -------------------------------------------------------------------------- */
:root:not([data-theme]) {
  color-scheme: light;
  --surface-canvas: var(--neutral-50);
  --surface-raised: var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-hover: var(--neutral-100);
  --surface-active: var(--neutral-200);
  --content-primary: var(--neutral-900);
  --content-secondary: var(--neutral-500);
  --content-tertiary: var(--neutral-400);
  --content-inverse: var(--neutral-0);
  --content-on-accent: var(--neutral-0);
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--brand-500);
  --accent-default: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-pressed: var(--brand-700);
  --accent-subtle: var(--brand-50);
  --accent-content: var(--brand-700);
  --status-success: var(--green-600);
  --status-success-subtle: var(--green-50);
  --status-success-content: var(--green-800);
  --status-warning: var(--amber-600);
  --status-warning-subtle: var(--amber-50);
  --status-warning-content: var(--amber-800);
  --status-danger: var(--red-600);
  --status-danger-subtle: var(--red-50);
  --status-danger-content: var(--red-800);
  --status-info: var(--blue-600);
  --status-info-subtle: var(--blue-50);
  --status-info-content: var(--blue-800);
  --viz-wave-played: var(--brand-500);
  --viz-wave-remaining: var(--neutral-300);
  --viz-wave-selection: var(--brand-100);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface-canvas: var(--neutral-950);
    --surface-raised: var(--neutral-900);
    --surface-overlay: var(--neutral-850);
    --surface-sunken: var(--neutral-1000);
    --surface-hover: var(--neutral-850);
    --surface-active: var(--neutral-800);
    --content-primary: var(--neutral-50);
    --content-secondary: var(--neutral-400);
    --content-tertiary: var(--neutral-500);
    --content-inverse: var(--neutral-950);
    --border-subtle: var(--neutral-850);
    --border-default: var(--neutral-800);
    --border-strong: var(--neutral-700);
    --border-focus: var(--violet-400);
    --accent-hover: var(--violet-400);
    --accent-pressed: var(--violet-600);
    --accent-subtle: var(--violet-950);
    --accent-content: var(--violet-300);
    --status-success: var(--green-500);
    --status-success-subtle: var(--green-900);
    --status-success-content: var(--green-400);
    --status-warning: var(--amber-500);
    --status-warning-subtle: var(--amber-900);
    --status-warning-content: var(--amber-300);
    --status-danger: var(--red-500);
    --status-danger-subtle: var(--red-900);
    --status-danger-content: var(--red-300);
    --status-info: var(--blue-500);
    --status-info-subtle: var(--blue-900);
    --status-info-content: var(--blue-300);
    --viz-wave-played: var(--cyan-400);
    --viz-wave-remaining: var(--neutral-700);
    --viz-wave-selection: var(--violet-900);
  }
}

/* Someone who has asked their OS for more contrast gets the accessible theme
   by default rather than merely a darker one. */
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --surface-canvas: var(--hc-black);
    --surface-raised: var(--neutral-1000);
    --content-primary: var(--hc-white);
    --content-secondary: var(--neutral-200);
    --border-default: var(--neutral-400);
    --border-strong: var(--hc-white);
    --accent-default: var(--hc-accent);
    --border-focus: var(--hc-warning);
  }
}