/* =============================================================================
   Suno Studio — Sistema de Design (theme.css)
   v3a-fix: fontes maiores, mais respiração, contraste melhor
   ============================================================================= */

:root,
:root[data-theme="dark"] {
    /* === SUPERFÍCIES (escala mais ampla) === */
    --bg: #0a0a0a;
    --bg-elev-1: #161616;          /* sidebar, player */
    --bg-elev-2: #1f1f1f;          /* cards, inputs */
    --bg-elev-3: #2d2d2d;          /* hover */
    --bg-elev-4: #3d3d3d;          /* active */
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-overlay-strong: rgba(0, 0, 0, 0.85);
    --bg-overlay-medium: rgba(0, 0, 0, 0.55);
    --bg-transparent: rgba(0, 0, 0, 0);

    /* === BORDAS === */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-focus: var(--accent);

    /* === TEXTO === */
    --text: #ffffff;
    --text-muted: #c0c0c0;
    --text-faint: #7a7a7a;
    --text-disabled: #4a4a4a;

    /* === ACENTO === */
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-active: #6366f1;
    --accent-bg: rgba(129, 140, 248, 0.12);
    --accent-bg-strong: rgba(129, 140, 248, 0.22);
    --accent-on: #0a0a0a;

    /* === SEMÂNTICAS === */
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.12);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);

    /* === GRADIENTE === */
    --cover-saturation: 50%;
    --cover-lightness-1: 30%;
    --cover-lightness-2: 25%;
    --hero-saturation: 45%;
    --hero-lightness: 22%;

    /* === TIPOGRAFIA — FONTES MAIORES === */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 22px;
    --font-size-2xl: 36px;
    --font-size-3xl: 60px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    --letter-spacing-tight: -0.04em;
    --letter-spacing-wide: 1px;
    --letter-spacing-wider: 1.5px;

    --line-height-tight: 1.05;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* === ESPAÇAMENTO === */
    --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;

    /* === RAIO === */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* === SOMBRA === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);

    /* === LAYOUT === */
    --sidebar-width: 280px;
    --details-width: 380px;
    --player-height: 96px;
    --player-height-mobile: 64px;
    --topbar-mobile-height: 56px;

    /* === BREAKPOINTS === */
    --bp-mobile: 700px;
    --bp-tablet: 1100px;
    --bp-desktop: 1400px;

    /* === ANIMAÇÃO === */
    --transition-fast: 0.1s ease;
    --transition: 0.15s ease;
    --transition-slow: 0.25s ease;
}