/* ============================================================
   BRICKAS - CSS Variables (Design Tokens)
   ============================================================
   Variables partagées PC et Mobile
   ============================================================ */

:root {
    /* ===== COULEURS PRINCIPALES ===== */
    --sky-blue: #c8e6f5;
    --panel-bg: rgba(255, 255, 255, 0.95);
    --popup-bg: rgba(180, 220, 240, 0.85);
    --popup-border: rgba(255, 255, 255, 0.6);

    /* ===== COULEURS ACCENT ===== */
    --accent-pink: #ff4d6d;
    --accent-cyan: #4dd4e8;
    --accent-blue: #5b7fff;
    --accent-green: #10b981;
    --accent-orange: #f59e0b;
    --accent-purple: #8b5cf6;

    /* ===== TEXTE ===== */
    --text-dark: #2d3436;
    --text-muted: #636e72;
    --text-light: #ffffff;

    /* ===== OMBRES ===== */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.3);

    /* ===== GLASSMORPHISM ===== */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: 20px;

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

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 50%;

    /* ===== TRANSITIONS ===== */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Fira Code', monospace;

    /* ===== Z-INDEX LAYERS ===== */
    --z-canvas: 1;
    --z-ui: 100;
    --z-panel: 200;
    --z-modal: 500;
    --z-overlay: 900;
    --z-tooltip: 1000;
}

/* ===== VARIABLES MOBILE (Touch Controls) ===== */
:root {
    --touch-glass-bg: rgba(255, 255, 255, 0.15);
    --touch-glass-border: rgba(255, 255, 255, 0.3);
    --touch-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --touch-blur: 20px;
    --touch-accent: rgba(255, 255, 255, 0.9);
    --touch-active: rgba(255, 255, 255, 0.35);
    --touch-text: rgba(255, 255, 255, 0.95);
    --touch-text-muted: rgba(255, 255, 255, 0.6);
    --touch-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}