/* Imports Fonts & Icons */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Variables Globales */
:root {
    --background-color-light: #2b2b2b;
    --background-color-dark: #333333;
    --text-color-light: #000000;
    --text-color2-light: #7f7f7f;
    --text-color-dark: #ffffff;
    --text-color2-dark: #d5d5d5;
    --primary-color-light: rgb(255, 187, 0);
    --primary-color-dark: rgb(255, 187, 0);
    --progress-bar-color-light: #e6e6e6;
    --secondary-color-light: #555555;
    --secondary-color-dark: #555555;
    --border-color-light: #bdbdbd;
    --border-color-dark: #7f7f7f;
    --btn-backround-light: #fcf7ee;
    --btn-backround-dark: #333333;
    --btn-active-light: rgb(255, 187, 0);
    --btn-shadow-light: #6d6d6d;
    --btn-text-light: #333333;
    
    /* Boutons 3D - Dimensions */
    --btn-playlist-width: 180px;
    --btn-playlist-height: 75px;
    --btn-control-width: 75px;
    --btn-control-height: 45px;
    
    /* Boutons 3D - Ombres et effets */
    --btn-shadow-offset: 6px;
    --btn-border-radius: 10px;
    --btn-active-transform: translate(6px, 6px);
    
    /* Boutons 3D - Padding (pour playlist-name uniquement) */
    --btn-playlist-padding-y: 8px;
    --btn-playlist-padding-x: 12px;
    
    /* Masque offline */
    --offline-overlay-color: rgba(255, 255, 255, 0.6);
}