/**
 * TutoScore - Variables CSS communes
 * Ce fichier définit les custom properties partagées entre tous les modules
 */

:root {
    /* ==================== COULEURS PRIMAIRES ==================== */
    --color-primary: #2196f3;
    --color-primary-light: #e3f2fd;
    --color-primary-dark: #1976d2;

    /* ==================== COULEURS FEEDBACK ==================== */
    --color-success: #4caf50;
    --color-success-light: #81c784;
    --color-success-dark: #43a047;

    --color-warning: #ff9800;
    --color-warning-light: #ffb74d;

    --color-error: #f44336;
    --color-error-light: #e57373;
    --color-error-dark: #e53935;

    --color-info: #9c27b0;

    /* ==================== COULEURS NEUTRES ==================== */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdbdbd;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* Alias sémantiques */
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #888888;
    --color-text-light: #999999;

    --color-border: #dddddd;
    --color-border-light: #eeeeee;

    --color-background: #ffffff;
    --color-background-alt: rgb(235, 234, 234);
    --color-background-dark: rgb(203, 203, 203);

    /* ==================== ESPACEMENTS ==================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ==================== BORDURES ==================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;
    --radius-pill: 9999px;

    /* ==================== OMBRES ==================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.1);

    /* ==================== TYPOGRAPHIE ==================== */
    --font-family: Arial, sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==================== TRANSITIONS ==================== */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ==================== Z-INDEX ==================== */
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-header: 100;
    --z-overlay: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-popup: 500;
    --z-toast: 1000;

    /* ==================== COMPOSANTS SPÉCIFIQUES ==================== */

    /* Header */
    --header-height: 56px;
    --header-bg: var(--color-white);
    --header-shadow: var(--shadow-md);

    /* Drawer */
    --drawer-width: 300px;
    --drawer-bg: var(--color-white);

    /* Boutons */
    --btn-padding-y: 10px;
    --btn-padding-x: 24px;
    --btn-radius: var(--radius-md);

    /* Switch toggle */
    --switch-width: 44px;
    --switch-height: 24px;
    --switch-bg: #ccc;
    --switch-bg-active: var(--color-success);
    --switch-thumb-size: 18px;

    /* Piano */
    --piano-bg: rgb(119, 119, 119);
    --piano-white-key: #ffffff;
    --piano-black-key: #000000;
    --piano-key-greyed: rgb(152, 152, 152);
}

/* ==================== ACCESSIBILITÉ ==================== */

/* Skip link - visible uniquement au focus */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-toast);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--transition-normal);
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}