/* ===== VARIABLES CSS GLOBALES - DASHBOARD D314 ===== */
/* ALIGNÉ SUR LE DESIGN V5 — couleurs exactes Claude Code Settings */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* ===== DIMENSIONS ET ESPACEMENTS ===== */
    --navbar-height: 70px;
    --footer-height: 60px;
    --dashboard-z-index: 98;

    --sidebar-width: 280px;
    --right-sidebar-width: 320px;
    --right-sidebar-width-medium: 300px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 32px;
    --spacing-xxxxl: 40px;

    /* ===== COULEURS — V5 EXACT ===== */

    /* Fonds — plus chauds que le noir pur */
    --bg-primary:   #13131f;
    --bg-secondary: #17172a;
    --bg-gradient:  #13131f;

    /* Surfaces */
    --surface-glass:        rgba(255, 255, 255, 0.04);
    --surface-glass-hover:  rgba(255, 255, 255, 0.07);
    --surface-glass-active: rgba(255, 255, 255, 0.09);
    --surface-elevated:     rgba(255, 255, 255, 0.05);
    --surface-card:         #1c1c2e;

    /* Texte */
    --text-primary:   #e6e8f6;
    --text-secondary: #8486a4;
    --text-muted:     #4a4c68;
    --text-disabled:  #272940;

    /* Bordures */
    --border-subtle:  rgba(255, 255, 255, 0.055);
    --border-default: rgba(255, 255, 255, 0.055);
    --border-medium:  rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.18);
    --border-hover:   rgba(255, 255, 255, 0.18);

    /* ── COULEUR PRINCIPALE : VIOLET (Mathématiques) ── */
    --primary-color:    #6366f1;
    --primary-dark:     #4f46e5;
    --primary-light:    rgba(99, 102, 241, 0.13);
    --primary-shadow:   rgba(99, 102, 241, 0.35);
    --primary-border:   rgba(99, 102, 241, 0.35);
    --primary-hover:    #818cf8;
    --primary-gradient: linear-gradient(135deg, #6366f1, #818cf8);

    /* ── COULEUR SECONDAIRE : CYAN (Physique) ── */
    --accent-phys:        #22d3ee;
    --accent-phys-light:  rgba(20, 180, 180, 0.13);
    --accent-phys-border: rgba(20, 180, 180, 0.35);

    /* ── COULEUR TERTIAIRE : BLEU ── */
    --accent-purple:        #60a5fa;
    --accent-purple-light:  rgba(40, 100, 220, 0.13);
    --accent-purple-border: rgba(40, 100, 220, 0.35);

    /* ── ÉTATS ── */

    /* Succès — vert */
    --success-color:    #10b981;
    --success-bg:       rgba(20, 160, 120, 0.13);
    --success-border:   rgba(20, 160, 120, 0.35);
    --success-gradient: rgba(20, 160, 120, 0.13);

    /* Warning — amber */
    --warning-color:    #f59e0b;
    --warning-bg:       rgba(180, 120, 20, 0.13);
    --warning-border:   rgba(180, 120, 20, 0.35);
    --warning-gradient: rgba(180, 120, 20, 0.13);

    /* Danger — rose/pink */
    --danger-color:    #f472b6;
    --danger-bg:       rgba(220, 60, 120, 0.13);
    --danger-border:   rgba(220, 60, 120, 0.35);
    --danger-gradient: rgba(220, 60, 120, 0.13);

    /* Info — bleu */
    --info-color:    #60a5fa;
    --info-bg:       rgba(40, 100, 220, 0.13);
    --info-border:   rgba(40, 100, 220, 0.35);
    --info-gradient: rgba(40, 100, 220, 0.13);

    /* Gold */
    --gold-color:     #f59e0b;
    --gold-secondary: #d97706;
    --gold-bg:        rgba(180, 120, 20, 0.13);
    --gold-border:    rgba(180, 120, 20, 0.35);

    /* Orange */
    --orange-color:   #d97706;
    --orange-bg:      rgba(200, 100, 20, 0.13);
    --orange-border:  rgba(200, 100, 20, 0.35);

    /* ===== TYPOGRAPHIE — V5 ===== */
    --font-family-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-family-heading:  'Plus Jakarta Sans', system-ui, sans-serif;
    --font-family-mono:     'JetBrains Mono', monospace;

    --font-size-xs:      10px;
    --font-size-sm:      11px;
    --font-size-base:    12px;
    --font-size-md:      13px;
    --font-size-lg:      14px;
    --font-size-xl:      16px;
    --font-size-xxl:     18px;
    --font-size-title:   20px;
    --font-size-heading: 22px;
    --font-size-display: 28px;
    --font-size-hero:    32px;
    --font-size-massive: 48px;
    --font-size-xxxxl:   36px;
    --font-size-mega:    56px;

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

    --line-height-tight:   1.2;
    --line-height-normal:  1.4;
    --line-height-relaxed: 1.6;

    /* ===== EFFETS VISUELS ===== */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   14px;
    --radius-xxl:  20px;
    --radius-full: 50%;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.6);

    --shadow-primary:    0 4px 16px rgba(120, 80, 220, 0.2);
    --shadow-primary-lg: 0 8px 24px rgba(120, 80, 220, 0.3);
    --shadow-glow-blue:  0 0 20px rgba(60, 100, 220, 0.15);
    --shadow-glow-purple:0 0 20px rgba(120, 80, 220, 0.18);

    --blur-sm: blur(10px);
    --blur-md: blur(20px);
    --blur-lg: blur(25px);
    --blur-xl: blur(30px);

    /* ===== TRANSITIONS ===== */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.45s ease;
    --transition-bounce: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    --animation-fast:      0.3s;
    --animation-normal:    0.5s;
    --animation-slow:      1s;
    --animation-very-slow: 2s;

    /* ===== GRILLES ===== */
    --grid-gap-sm: 10px;
    --grid-gap-md: 14px;
    --grid-gap-lg: 18px;
    --grid-gap-xl: 22px;

    /* ===== INTÉGRATION WORDPRESS ===== */
    --navbar-bg:     rgba(19, 19, 31, 0.92);
    --footer-bg:     rgba(19, 19, 31, 0.92);
    --navbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.055);
    --footer-shadow: 0 -1px 0 rgba(255, 255, 255, 0.055);

    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;
    --z-toast:          1080;
    --z-floating:       1090;

    /* ===== BARRES DE PROGRESSION ===== */
    --progress-height:        5px;
    --progress-bg:            rgba(255, 255, 255, 0.07);
    --progress-fill-math:     linear-gradient(90deg, #9b72f8, #c084fc);
    --progress-fill-science:  linear-gradient(90deg, #60a5fa, #93c5fd);
    --progress-fill-language: linear-gradient(90deg, #f472b6, #f9a8d4);
    --progress-fill-history:  linear-gradient(90deg, #f59e0b, #fcd34d);
    --progress-fill-art:      linear-gradient(90deg, #22d3ee, #67e8f9);

    /* ===== BADGES DE NAVIGATION ===== */
    --nav-badge-default:     var(--primary-color);
    --nav-badge-alert:       linear-gradient(135deg, #f472b6, #e879a0);
    --nav-badge-achievement: linear-gradient(135deg, #f59e0b, #d97706);

    /* ===== GRAPHIQUES ===== */
    --chart-color-primary:   var(--primary-color);
    --chart-color-secondary: var(--success-color);
    --chart-color-tertiary:  var(--warning-color);
    --chart-color-quaternary:var(--danger-color);
    --chart-grid-color:      rgba(255, 255, 255, 0.055);
    --chart-text-color:      var(--text-muted);

    /* ===== CALCULÉES ===== */
    --content-width:        calc(100vw - var(--sidebar-width) - var(--right-sidebar-width));
    --content-width-no-right: calc(100vw - var(--sidebar-width));
    --content-height:       calc(100vh - var(--navbar-height) - var(--footer-height));
    --sidebar-height:       calc(100vh - var(--navbar-height));

    /* ===== ANIMATIONS ===== */
    --shimmer-gradient:       linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    --float-diagonal-duration:25s;
    --pulse-duration:         2s;

    /* Focus */
    --focus-ring:   0 0 0 3px rgba(120, 80, 220, 0.18);
    --focus-border: var(--primary-color);

    /* Formulaires */
    --form-input-height:      46px;
    --form-input-padding:     14px 18px;
    --form-input-border:      1px solid var(--border-medium);
    --form-input-border-focus:1px solid var(--primary-color);
    --form-input-bg:          rgba(255, 255, 255, 0.04);
    --form-input-bg-focus:    rgba(120, 80, 220, 0.08);
}

/* ===== VARIABLES CONTEXTUELLES ===== */
.d314-dashboard-container {
    --navbar-height: var(--navbar-height, 70px);
    --dashboard-z-index: var(--dashboard-z-index, 98);
}