/* ==========================================================================
   DESIGN TOKENS - SOBRE, NOIR & GRIS SOMBRE (STUDIO / DASHBOARD)
   ========================================================================== */

:root {
  /* Palette de base : Noir absolu & gris anthracite sombre */
  --bg-app: #090a0d;
  --bg-sidebar: #0c0e13;
  --bg-topbar: #0c0e13;
  --bg-surface: #111319;
  --bg-card: #13161f;
  --bg-card-hover: #181c27;
  --bg-elevated: #1a1e2a;
  --bg-player: #0b0d12;

  /* Bordures fines et élégantes */
  --border-subtle: #1c202c;
  --border-medium: #272d3e;
  --border-hover: #3b435b;
  --border-focus: #4b5563;

  /* Typographie & Accents sobres */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #7c8ba1;
  --text-white: #ffffff;

  /* Accents sobres et monochromes */
  --accent-white: #ffffff;
  --accent-pill-active: #ffffff;
  --accent-pill-text: #090a0d;
  --accent-blue-subtle: #38bdf8;
  --accent-spotify: #1db954;
  --accent-youtube: #ff0033;

  /* Typographie */
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', Helvetica, Arial, sans-serif;

  /* Rayons de courbure */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Dimensions */
  --sidebar-width: 250px;
  --topbar-height: 64px;
  --player-height: 76px;
  --max-content-width: 1440px;

  /* Transitions fluides */
  --transition: 0.15s ease;
}