/* ==========================================================================
   JingleForge Design & Touch Tokens (normative: docs/spec-combined-delivery.md §13)
   Only §13 token values appear in this file (AC20.2, §18 row 24).
   ========================================================================== */

:root {
    /* Colors (Dark Mode Default — §13) */
    --background-base: #1E1E1E;           /* Background-Base */
    --background-surface: #252526;        /* Background-Surface */
    --background-surface-hover: #2A2D2E;  /* Background-Surface-Hover */
    --text-primary: #E2E2E2;              /* Text-Primary */
    --text-secondary: #969696;            /* Text-Secondary */
    --accent-primary: #007ACC;            /* Accent-Primary */
    --accent-hover: #005999;              /* Accent-Hover */
    --border-subtle: #333333;             /* Border-Subtle */
    --status-success: #89D185;            /* Status-Success */
    --status-error: #F14C4C;              /* Status-Error */
    --status-warning: #CCA700;            /* Status-Warning */
    --surface-warningtint: #2B2512;       /* Surface-WarningTint */
    --surface-warning-tint: #2B2512;      /* Surface-WarningTint kebab alias */
    --surface-errortint: #2E1A1A;         /* Surface-ErrorTint */
    --surface-error-tint: #2E1A1A;        /* Surface-ErrorTint kebab alias */

    /* Disabled-state rule (AC20.2 — §13) */
    --accent-disabled: #264F66;           /* Accent-Disabled */
    --text-on-accent: #FFFFFF;            /* Text-On-Accent (WCAG AA 4.51:1 on #007ACC) */

    /* Shorthand aliases matching docs/mockups/studio-layout.html */
    --bg-base: var(--background-base);
    --bg-surface: var(--background-surface);
    --bg-surface-hover: var(--background-surface-hover);

    /* Typography (Segoe UI / system default — §13) */
    --font-family-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font-Family-Sans */
    --font-family-mono: 'Consolas', monospace;                           /* Font-Family-Mono */
    --font-title: 24px;                   /* Font-Title: 24px, Semi-Bold */
    --font-title-weight: 600;
    --font-heading: 18px;                 /* Font-Heading: 18px, Semi-Bold */
    --font-heading-weight: 600;
    --font-body: 14px;                    /* Font-Body: 14px, Regular */
    --font-body-weight: 400;
    --font-mono: 13px;                    /* Font-Mono: 13px, Consolas / Courier New */

    /* Spacing & Radius (§13) */
    --spacing-xs: 4px;                    /* Spacing-Xs */
    --spacing-sm: 8px;                    /* Spacing-Sm */
    --spacing-md: 16px;                   /* Spacing-Md */
    --spacing-lg: 24px;                   /* Spacing-Lg */
    --radius-sm: 4px;                     /* Radius-Sm */
    --radius-md: 8px;                     /* Radius-Md */
    --radius-sheet: 12px;                 /* Radius-Sheet */

    /* Touch & layout tokens (mobile-first — §13) */
    --touch-target-min: 44px;             /* Touch-Target-Min */
    --header-height: 56px;                /* Header-Height */
    --tab-bar-height: 64px;               /* Tab-Bar-Height */
    --mini-player-height: 64px;           /* Mini-Player-Height */
    --control-height: 48px;               /* Control-Height */
    --player-play-size: 56px;             /* Player-Play-Size */
    --seek-touch-height: 28px;            /* Seek-Touch-Height (sole sub-44px exception) */
    --status-dot: 10px;                   /* Status-Dot */
    --content-max-tablet: 720px;          /* Content-Max-Tablet */
    --sidebar-width: 280px;               /* Sidebar-Width (desktop >=1024px only) */
    --queue-dock-width: 320px;            /* Queue-Dock-Width (desktop >=1024px only) */
    --player-footer-height: 88px;         /* Player-Footer-Height (desktop >=1024px only) */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--background-base);
    color: var(--text-primary);
    font-family: var(--font-family-sans);
    font-size: var(--font-body);
    font-weight: var(--font-body-weight);
}

.surface-heading {
    margin: 0;
    font-size: var(--font-title);
    font-weight: var(--font-title-weight);
    color: var(--text-primary);
}