/*
 * SIIX Studio — Unfold Admin Theme
 * ---------------------------------------------------------------------------
 * Source of truth: siix-music-design-system/project/colors_and_type.css
 *
 * Base + primary RGB scales are declared via UNFOLD["COLORS"] in
 * siixstudio/settings.py; this stylesheet layers the rest of the brand
 * vocabulary (fonts, type scale, semantic surfaces, radii, shadows, motion,
 * focus, utility classes) on top so the admin matches the consumer app
 * pixel-for-pixel.
 *
 * Aesthetic: studio-grade restraint. One blue accent for primary action,
 * focus, and waveform play state. No glassmorphism. No gradients for
 * atmosphere. Closer to a DAW than a streaming app.
 * ---------------------------------------------------------------------------
 */

/* ============================================================================
   1. Fonts (self-hosted) + Material Symbols
   ============================================================================ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
         url("../fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Variable-Italic.woff2") format("woff2-variations"),
         url("../fonts/Inter-Variable-Italic.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"),
         url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..600,0..1,-25..200");

/* ============================================================================
   2. Brand tokens
   ============================================================================ */
:root {
    /* Families */
    --font-primary: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-sans:    var(--font-primary);
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-serif:   "Inter", ui-serif, Georgia, serif;

    /* Type scale */
    --fs-display-2xl: 72px;  --lh-display-2xl: 1.02;  --ls-display-2xl: -0.03em;
    --fs-display-xl:  56px;  --lh-display-xl:  1.04;  --ls-display-xl:  -0.025em;
    --fs-display-lg:  44px;  --lh-display-lg:  1.06;  --ls-display-lg:  -0.02em;
    --fs-h1: 36px;           --lh-h1: 1.12;           --ls-h1: -0.02em;
    --fs-h2: 28px;           --lh-h2: 1.18;           --ls-h2: -0.015em;
    --fs-h3: 22px;           --lh-h3: 1.25;           --ls-h3: -0.01em;
    --fs-h4: 18px;           --lh-h4: 1.35;           --ls-h4: -0.005em;
    --fs-body-lg: 17px;      --lh-body-lg: 1.55;      --ls-body-lg: 0;
    --fs-body:    15px;      --lh-body:    1.55;      --ls-body:    0;
    --fs-body-sm: 13px;      --lh-body-sm: 1.5;       --ls-body-sm: 0;
    --fs-caption: 12px;      --lh-caption: 1.4;       --ls-caption: 0.01em;
    --fs-eyebrow: 11px;      --lh-eyebrow: 1.2;       --ls-eyebrow: 0.08em;
    --fs-mono-md: 13px;
    --fs-mono-sm: 12px;
    --fs-mono-xs: 11px;

    /* Weights */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* Base / zinc scale (mirrors UNFOLD["COLORS"]["base"]) */
    --base-0:   #ffffff;
    --base-50:  rgb(250 250 250);
    --base-100: rgb(244 244 245);
    --base-200: rgb(228 228 231);
    --base-300: rgb(212 212 216);
    --base-400: rgb(161 161 170);
    --base-500: rgb(113 113 122);
    --base-600: rgb(82 82 91);
    --base-700: rgb(63 63 70);
    --base-800: rgb(39 39 42);
    --base-900: rgb(24 24 27);
    --base-950: rgb(9 9 11);

    /* Primary / SIIX blue scale (mirrors UNFOLD["COLORS"]["primary"]) */
    --primary-50:  rgb(240 246 255);
    --primary-100: rgb(220 235 254);
    --primary-200: rgb(190 219 254);
    --primary-300: rgb(145 195 253);
    --primary-400: rgb(97 166 250);
    --primary-500: rgb(60 131 246);   /* SIIX blue — signature */
    --primary-600: rgb(36 99 235);
    --primary-700: rgb(29 79 215);
    --primary-800: rgb(30 63 174);
    --primary-900: rgb(30 59 138);
    --primary-950: rgb(23 37 84);

    /* Status */
    --success-50:  rgb(220 252 231);
    --success-500: rgb(34 197 94);
    --success-700: rgb(22 163 74);
    --warning-50:  rgb(254 249 195);
    --warning-500: rgb(234 179 8);
    --warning-700: rgb(161 98 7);
    --danger-50:   rgb(254 226 226);
    --danger-500:  rgb(239 68 68);
    --danger-700:  rgb(185 28 28);

    /* Semantic — Light theme (default) */
    --bg:         var(--base-0);
    --bg-subtle:  var(--base-50);
    --bg-muted:   var(--base-100);
    --bg-inset:   var(--base-100);

    --fg:         var(--base-900);
    --fg-strong:  var(--base-950);
    --fg-default: var(--base-700);
    --fg-subtle:  var(--base-500);
    --fg-muted:   var(--base-400);

    --border:        var(--base-200);
    --border-strong: var(--base-300);
    --border-subtle: var(--base-100);

    --accent:        var(--primary-500);
    --accent-hover:  var(--primary-600);
    --accent-fg:     #ffffff;
    --accent-bg:     var(--primary-50);
    --accent-border: var(--primary-200);

    --focus-ring:    rgb(60 131 246 / 0.5);
    --selection-bg:  rgb(60 131 246 / 0.18);

    /* Waveform */
    --waveform-played:   var(--primary-500);
    --waveform-unplayed: var(--base-300);
    --waveform-cursor:   var(--base-900);

    /* Radii */
    --radius-xs:   3px;
    --radius-sm:   4px;
    --radius:      6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* Shadows — layered, not blurry-puffy */
    --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow:       0 2px 8px -2px rgb(0 0 0 / 0.08), 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-md:    0 4px 12px -4px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg:    0 12px 32px -8px rgb(0 0 0 / 0.14), 0 4px 8px -4px rgb(0 0 0 / 0.06);
    --shadow-panel: -4px 0 24px rgb(0 0 0 / 0.08);

    /* 4px spacing scale */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Motion — no bounce, no spring */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration:      180ms;
    --duration-slow: 250ms;

    /* Layout */
    --max-content: 1280px;
    --max-prose:   680px;
    --header-h:    56px;
    --sidebar-w:   240px;
}

/* Dark theme — sibling, not a switch flip */
[data-theme="dark"], .dark, .theme-dark {
    --bg:         var(--base-950);
    --bg-subtle:  var(--base-900);
    --bg-muted:   var(--base-800);
    --bg-inset:   var(--base-900);

    --fg:         var(--base-50);
    --fg-strong:  #ffffff;
    --fg-default: var(--base-200);
    --fg-subtle:  var(--base-400);
    --fg-muted:   var(--base-500);

    --border:        rgb(255 255 255 / 0.08);
    --border-strong: rgb(255 255 255 / 0.14);
    --border-subtle: rgb(255 255 255 / 0.04);

    --accent:        var(--primary-400);
    --accent-hover:  var(--primary-300);
    --accent-bg:     rgb(60 131 246 / 0.12);
    --accent-border: rgb(60 131 246 / 0.30);

    --waveform-played:   var(--primary-400);
    --waveform-unplayed: var(--base-700);
    --waveform-cursor:   var(--base-50);

    --shadow-panel: -4px 0 24px rgb(0 0 0 / 0.5);
}

/* ============================================================================
   3. Typography baseline
   ============================================================================ */
html { color-scheme: light; font-family: var(--font-sans); }
[data-theme="dark"], .dark { color-scheme: dark; }

body,
#content,
.font-sans,
input,
select,
textarea,
button {
    font-family: var(--font-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4,
.text-lg, .text-xl, .text-2xl {
    letter-spacing: -0.01em;
    font-weight: var(--fw-semibold);
}

/* Mono / tabular numerics — every measurement (BPM, LUFS, ISRC, timecode, size) */
.mono, code, kbd, pre, samp, .tabular,
.font-mono, [class*="font-mono"],
/* tabular numerics on common admin measurement columns */
.field-bpm, .field-duration, .field-file_size,
.field-bpm_global, .field-isrc, .field-sample_rate {
    font-family: var(--font-mono) !important;
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* Material Symbols — brand spec: stroke weight 300 (light/regular feel),
   filled only for "selected" or "playing" states. */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.filled,
.material-symbols-outlined[data-fill="1"] {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ============================================================================
   4. Utility classes (parity with consumer-app design tokens)
   ============================================================================ */
.display-2xl { font-size: var(--fs-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--ls-display-2xl); font-weight: var(--fw-semibold); }
.display-xl  { font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl);  letter-spacing: var(--ls-display-xl);  font-weight: var(--fw-semibold); }
.display-lg  { font-size: var(--fs-display-lg);  line-height: var(--lh-display-lg);  letter-spacing: var(--ls-display-lg);  font-weight: var(--fw-semibold); }

.text-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.text-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.text-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.text-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-subtle); }
.eyebrow {
    font-size: var(--fs-eyebrow);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--fg-subtle);
}

.muted    { color: var(--fg-subtle); }
.strong   { color: var(--fg-strong); }

/* ============================================================================
   5. Interaction — focus, motion, selection
   ============================================================================ */
a, button, input, select, textarea,
.btn, [role="button"] {
    transition:
        background-color var(--duration) var(--ease-out),
        border-color var(--duration) var(--ease-out),
        color var(--duration) var(--ease-out),
        box-shadow var(--duration) var(--ease-out);
}

*:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--selection-bg); }

/* ============================================================================
   6. Chrome (sidebar, login)
   ============================================================================ */
[data-sidebar] {
    border-right-color: rgba(255, 255, 255, 0.06);
}

.login-background {
    filter: brightness(0.7) saturate(1.1);
}

/* ============================================================================
   7. Track list row tints — sourced from brand status palette
   ============================================================================ */
tr.row-stem td,
tr.row-stem:nth-child(odd) td,
tr.row-stem:nth-child(even) td {
    background-color: rgb(60 131 246 / 0.08) !important;
}
tr.row-optional-version td,
tr.row-optional-version:nth-child(odd) td,
tr.row-optional-version:nth-child(even) td {
    background-color: rgb(234 179 8 / 0.08) !important;
}