/* ========== VARIABLES CSS POUR THEMES ========== */
:root {
  /* Light Mode (par défaut) - Minimaliste */
  --bg-primary: #FCFCFC;
  --bg-secondary: #FAFAFA;
  --bg-tertiary: #F7F7F7;
  --text-primary: #282828;
  --text-secondary: #B8B8B8;
  --text-tertiary: #A4A4A4;
  --accent: #A4A4A4;
  --accent-light: #B8B8B8;
  --border-color: #ECECEC;
  --border-color-dark: #D9D9D9;
  --shadow: rgba(0, 0, 0, 0.04);
  --shadow-hover: rgba(0, 0, 0, 0.06);
  --hover-bg: #FAFAFA;
  --titlebar-bg: #FCFCFC;
  --titlebar-text: #282828;
  --titlebar-border: #E5E5E5;

  /* Couleurs sémantiques (thème-agnostiques) */
  --text-muted: rgba(40, 40, 40, 0.33);
  --text-faint: rgba(40, 40, 40, 0.17);
  --border-subtle: rgba(40, 40, 40, 0.07);
  --like-color: #FF4B4B;
  --hover-overlay: rgba(40, 40, 40, 0.016);

  /* Niveaux alpha adaptatifs — même valeur light/dark, channel inversé */
  --fg-rest:    rgba(0, 0, 0, 0.42);   /* boutons filtres au repos */
  --fg-subtle:  rgba(0, 0, 0, 0.38);   /* labels tabs, titres suggestions */
  --fg-hint:    rgba(0, 0, 0, 0.45);   /* labels sliders, exact labels */
  --fg-whisper: rgba(0, 0, 0, 0.32);   /* ellipsis pagination, titres très discrets */
  --border-soft:   rgba(0, 0, 0, 0.10); /* bordures légères */
  --surface-hover: rgba(0, 0, 0, 0.04); /* fond hover transparent */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Typography */
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-base: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  /* Section titles (Browse-style) */
  --section-title-size: clamp(2.5rem, 8vw, 58px);
  --section-title-weight: 400;
  --section-title-tracking: -0.02em;
  --section-sub-size: 14px;
  --section-sub-tracking: 0.11em;
  --section-gap: 52px;
  --section-header-gap: 14px;
  --section-header-mb: 20px;

  /* Cards */
  --card-size: 144px;
  --card-radius: 10px;
  --card-thumb-radius: 6px;
  --card-gap: 10px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Page hero (grille type Browse — réutilisable sur toutes les pages) */
  --page-hero-display-color: #282828;
  --page-hero-sub-color: #282828;
  --page-hero-pad-x: clamp(20px, 5vw, 50px);
  --page-hero-title-nudge: 0px;
  /* 0 = même colonne que le contenu (--browse-pad-x) ; évite le « displacement » titre vs cartes */
  --page-hero-title-optical-shift: 0px;
  --page-hero-title-font-size: clamp(2.1rem, 8.4vw, 5.25rem);
  --page-hero-body-margin-top: clamp(18px, 2.6vw, 30px);
  /* Bas de page Browse (main scroll) — au-dessus du loop-bottom-header ; utilisé avec !important sous body.audio-playing */
  --browse-content-pad-bottom: 240px;
  --page-section-header-gap: 14px;
  --page-section-header-margin-bottom: clamp(18px, 2.6vw, 26px);
  --page-section-sub-font-size: 14px;
  --page-section-sub-pad-bottom: clamp(4px, 0.6vw, 6px);

  /* Account — contour Go Premium (accent discret, pas de remplissage) */
  --account-premium-outline: rgba(72, 62, 98, 0.4);
  --account-premium-outline-hover: rgba(48, 40, 68, 0.62);

  /* Sidebar — libellés inactifs (aligné sur --text-secondary) */
  --sidebar-nav-idle: #8B8B8B;

  /* Creator page — liens « All Packs / All Loops » */
  --creator-subview-link: #282828;
}

[data-theme="dark"] {
  /* Dark Mode - Minimaliste */
  --bg-primary: #282828;
  --bg-secondary: #2F2F2F;
  --bg-tertiary: #363636;
  --text-primary: #FFFFFF;
  --text-secondary: #B8B8B8;
  --text-tertiary: #A4A4A4;
  --accent: #A4A4A4;
  --accent-light: #B8B8B8;
  --border-color: #363636;
  --border-color-dark: #3A3A3A;
  --shadow: rgba(0, 0, 0, 0.25);
  --shadow-hover: rgba(0, 0, 0, 0.35);
  --hover-bg: #2F2F2F;
  --titlebar-bg: #282828;
  --titlebar-text: #FFFFFF;
  --titlebar-border: #2a2a2a;
  --page-hero-display-color: rgba(245, 245, 245, 0.94);
  --page-hero-sub-color: rgba(245, 245, 245, 0.94);

  --text-muted: rgba(255, 255, 255, 0.33);
  --text-faint: rgba(255, 255, 255, 0.17);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --hover-overlay: rgba(255, 255, 255, 0.016);

  --fg-rest:    rgba(255, 255, 255, 0.42);
  --fg-subtle:  rgba(255, 255, 255, 0.38);
  --fg-hint:    rgba(255, 255, 255, 0.45);
  --fg-whisper: rgba(255, 255, 255, 0.32);
  --border-soft:   rgba(255, 255, 255, 0.14);
  --surface-hover: rgba(255, 255, 255, 0.06);

  --account-premium-outline: rgba(198, 190, 232, 0.4);
  --account-premium-outline-hover: rgba(220, 214, 248, 0.58);

  --sidebar-nav-idle: var(--text-secondary);

  --creator-subview-link: rgba(245, 245, 245, 0.94);
}

/* Détection automatique du thème système (Mac compatible) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Appliquer dark mode si pas de préférence utilisateur et système en dark */
    --bg-primary: #282828;
    --bg-secondary: #2F2F2F;
    --bg-tertiary: #363636;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8B8;
    --text-tertiary: #A4A4A4;
    --accent: #A4A4A4;
    --accent-light: #B8B8B8;
    --border-color: #363636;
    --border-color-dark: #3A3A3A;
    --shadow: rgba(0, 0, 0, 0.25);
    --shadow-hover: rgba(0, 0, 0, 0.35);
    --hover-bg: #2F2F2F;
    --titlebar-bg: #282828;
    --titlebar-text: #FFFFFF;
    --titlebar-border: #2a2a2a;
    --page-hero-display-color: rgba(245, 245, 245, 0.94);
    --page-hero-sub-color: rgba(245, 245, 245, 0.94);
    --text-muted: rgba(255, 255, 255, 0.33);
    --text-faint: rgba(255, 255, 255, 0.17);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --hover-overlay: rgba(255, 255, 255, 0.016);

    --fg-rest:    rgba(255, 255, 255, 0.42);
    --fg-subtle:  rgba(255, 255, 255, 0.38);
    --fg-hint:    rgba(255, 255, 255, 0.45);
    --fg-whisper: rgba(255, 255, 255, 0.32);
    --border-soft:   rgba(255, 255, 255, 0.14);
    --surface-hover: rgba(255, 255, 255, 0.06);

    --account-premium-outline: rgba(198, 190, 232, 0.4);
    --account-premium-outline-hover: rgba(220, 214, 248, 0.58);

    --sidebar-nav-idle: var(--text-secondary);

    --creator-subview-link: rgba(245, 245, 245, 0.94);
  }
}