/* ============================================================
   THEME.CSS — Système de variables de design
   Hub — Calixte Kenmeugneu

   COMMENT PERSONNALISER :
   ─────────────────────────────────────────────────────────────
   Pour changer TOUTES les couleurs primaires  → modifier --color-primary
   Pour changer la forme de TOUS les boutons   → modifier --radius-btn
   Pour changer la forme de TOUTES les cartes  → modifier --radius-card
   Pour changer TOUTES les transitions         → modifier --transition-normal
   Pour changer la POLICE principale           → modifier --font-main
   ─────────────────────────────────────────────────────────────
   AUCUNE valeur de design ne doit être écrite directement
   dans app.css ou les modules. Tout vient d'ici.
   ============================================================ */

:root {

  /* ── PALETTE PRINCIPALE ──────────────────────────────────── */
  --color-primary:        #6C63FF;   /* Violet futuriste */
  --color-primary-light:  #8B85FF;
  --color-primary-dark:   #4A42CC;
  --color-primary-alpha:  rgba(108, 99, 255, 0.15);

  --color-secondary:      #FF6584;   /* Rose vif */
  --color-secondary-light:#FF8FA3;
  --color-secondary-dark: #CC3D5A;
  --color-secondary-alpha:rgba(255, 101, 132, 0.15);

  --color-accent:         #43E97B;   /* Vert néon */
  --color-accent-light:   #70F0A0;
  --color-accent-dark:    #22C55E;
  --color-accent-alpha:   rgba(67, 233, 123, 0.15);

  --color-warning:        #FFD166;   /* Jaune ambre */
  --color-warning-alpha:  rgba(255, 209, 102, 0.15);

  --color-danger:         #EF476F;   /* Rouge danger */
  --color-danger-alpha:   rgba(239, 71, 111, 0.15);

  --color-info:           #38BDF8;   /* Bleu ciel */
  --color-info-alpha:     rgba(56, 189, 248, 0.15);

  /* ── COULEURS PAR DOMAINE ────────────────────────────────── */
  --color-sysadmin:       #6C63FF;   /* Violet = Sysadmin */
  --color-network:        #43E97B;   /* Vert   = Réseau */
  --color-cybersec:       #EF476F;   /* Rouge  = Cybersécurité */
  --color-graphisme:      #FF6584;   /* Rose   = Graphisme */
  --color-health:         #38BDF8;   /* Bleu   = Santé */
  --color-freelance:      #FFD166;   /* Jaune  = Freelance */

  /* ── COULEURS MODULES V2 ─────────────────────────────────── */
  --color-growth:         #F59E0B;   /* Ambre  = Growth / éloquence */
  --color-growth-light:   #FCD34D;
  --color-growth-dark:    #D97706;
  --color-growth-alpha:   rgba(245, 158, 11, 0.15);

  --color-thinkers:       #D4AF37;   /* Or     = Thinkers / philosophie */
  --color-thinkers-light: #EDD97A;
  --color-thinkers-dark:  #B8860B;
  --color-thinkers-alpha: rgba(212, 175, 55, 0.15);

  --color-journal:        #10B981;   /* Émeraude = Journal */
  --color-journal-light:  #34D399;
  --color-journal-dark:   #059669;
  --color-journal-alpha:  rgba(16, 185, 129, 0.15);

  --color-planner:        #3B82F6;   /* Bleu   = Planner */
  --color-planner-light:  #60A5FA;
  --color-planner-dark:   #2563EB;
  --color-planner-alpha:  rgba(59, 130, 246, 0.15);

  --color-watchlist:      #06B6D4;   /* Cyan   = Watchlist */
  --color-watchlist-light:#22D3EE;
  --color-watchlist-dark: #0891B2;
  --color-watchlist-alpha:rgba(6, 182, 212, 0.15);

  --color-notes:          #8B5CF6;   /* Violet clair = Notes */
  --color-notes-light:    #A78BFA;
  --color-notes-dark:     #7C3AED;
  --color-notes-alpha:    rgba(139, 92, 246, 0.15);

  /* ── COULEURS CATÉGORIES PLANNER ────────────────────────── */
  --color-cat-studies:    #3B82F6;
  --color-cat-graphisme:  #EC4899;
  --color-cat-personal:   #10B981;
  --color-cat-religious:  #D4AF37;
  --color-cat-health:     #EF4444;
  --color-cat-growth:     #8B5CF6;
  --color-cat-english:    #06B6D4;
  --color-cat-freelance:  #F59E0B;

  /* ── COULEURS ÈRES (Thinkers) ────────────────────────────── */
  --color-era-ancient:     #D4AF37;
  --color-era-medieval:    #8B5CF6;
  --color-era-renaissance: #EC4899;
  --color-era-modern:      #3B82F6;
  --color-era-contemporary:#10B981;

  /* ── SURFACES (arrière-plans) — THÈME CLAIR PAR DÉFAUT ─── */
  --color-bg:             #F5F4FF;   /* Fond principal — blanc lavande */
  --color-bg-alt:         #EDEAFF;   /* Légèrement plus foncé */
  --color-surface:        #FFFFFF;   /* Cartes, sidebar — blanc pur */
  --color-surface-2:      #F0EEFF;   /* Hover, cartes imbriquées */
  --color-surface-3:      #E8E4FF;   /* Popups, modals */
  --color-border:         rgba(108, 99, 255, 0.18);
  --color-border-subtle:  rgba(0, 0, 0, 0.07);

  /* ── TEXTE ───────────────────────────────────────────────── */
  --color-text:           #1A1535;   /* Texte principal — violet très sombre */
  --color-text-muted:     #5B5485;   /* Texte secondaire */
  --color-text-faint:     #9C96BB;   /* Texte désactivé */
  --color-text-inverse:   #FFFFFF;   /* Texte sur fond coloré */

  /* ── GLASSMORPHISM ───────────────────────────────────────── */
  --glass-bg:             rgba(255, 255, 255, 0.75);
  --glass-bg-light:       rgba(108, 99, 255, 0.05);
  --glass-border:         rgba(108, 99, 255, 0.15);
  --glass-blur:           blur(20px);
  --glass-blur-sm:        blur(10px);

  /* ── TYPOGRAPHIE ─────────────────────────────────────────── */
  --font-main:    'Nunito', 'Calibri', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display: 'Nunito', 'Calibri', var(--font-main);

  --font-size-xs:   0.75rem;    /*  12px */
  --font-size-sm:   0.875rem;   /*  14px */
  --font-size-base: 1rem;       /*  16px */
  --font-size-md:   1.125rem;   /*  18px */
  --font-size-lg:   1.25rem;    /*  20px */
  --font-size-xl:   1.5rem;     /*  24px */
  --font-size-2xl:  1.875rem;   /*  30px */
  --font-size-3xl:  2.25rem;    /*  36px */
  --font-size-4xl:  3rem;       /*  48px */
  --font-size-5xl:  4rem;       /*  64px */

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

  --line-height-tight:  1.25;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* ── ESPACEMENTS ─────────────────────────────────────────── */
  --space-1:   0.25rem;    /*  4px */
  --space-2:   0.5rem;     /*  8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* ── BORDER-RADIUS ───────────────────────────────────────── */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    20px;
  --radius-3xl:    28px;
  --radius-full:   9999px;

  /* Raccourcis sémantiques (changer ici = change partout) */
  --radius-btn:    var(--radius-lg);    /* ← modifier pour changer TOUS les boutons */
  --radius-card:   var(--radius-2xl);   /* ← modifier pour changer TOUTES les cartes */
  --radius-input:  var(--radius-md);    /* ← modifier pour changer TOUS les inputs */
  --radius-badge:  var(--radius-full);  /* ← modifier pour changer TOUS les badges */
  --radius-avatar: var(--radius-full);  /* ← modifier pour changer TOUS les avatars */
  --radius-modal:  var(--radius-3xl);   /* ← modifier pour changer TOUTES les modals */

  /* ── OMBRES ──────────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(108, 99, 255, 0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(108, 99, 255, 0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(108, 99, 255, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(108, 99, 255, 0.15), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 48px rgba(108, 99, 255, 0.18), 0 8px 24px rgba(0,0,0,0.08);

  /* Ombres colorées (pour les cartes de modules) */
  --shadow-primary:   0 8px 32px rgba(108, 99, 255, 0.25);
  --shadow-secondary: 0 8px 32px rgba(255, 101, 132, 0.25);
  --shadow-accent:    0 8px 32px rgba(67, 233, 123, 0.25);
  --shadow-warning:   0 8px 32px rgba(255, 209, 102, 0.25);
  --shadow-danger:    0 8px 32px rgba(239, 71, 111, 0.25);

  /* ── GLOWS (néon) ────────────────────────────────────────── */
  --glow-primary:   0 0 20px rgba(108, 99, 255, 0.5), 0 0 60px rgba(108, 99, 255, 0.2);
  --glow-secondary: 0 0 20px rgba(255, 101, 132, 0.5), 0 0 60px rgba(255, 101, 132, 0.2);
  --glow-accent:    0 0 20px rgba(67, 233, 123, 0.5),  0 0 60px rgba(67, 233, 123, 0.2);
  --glow-warning:   0 0 20px rgba(255, 209, 102, 0.5), 0 0 60px rgba(255, 209, 102, 0.2);
  --glow-danger:    0 0 20px rgba(239, 71, 111, 0.5),  0 0 60px rgba(239, 71, 111, 0.2);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* Effet "spring" rebond */
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --transition-fast:   0.15s var(--ease-out);
  --transition-normal: 0.3s  var(--ease-in-out);    /* ← changer ici = toutes les transitions */
  --transition-slow:   0.6s  var(--ease-in-out);
  --transition-spring: 0.5s  var(--ease-spring);

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --sidebar-width:      260px;
  --sidebar-width-mini: 72px;    /* Mode réduit */
  --header-height:      64px;
  --content-max-width:  1400px;
  --panel-width:        380px;   /* Panneau latéral droit */

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-sidebar:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ── GRILLES ─────────────────────────────────────────────── */
  --grid-cols-2: repeat(2, 1fr);
  --grid-cols-3: repeat(3, 1fr);
  --grid-cols-4: repeat(4, 1fr);
  --grid-gap:    var(--space-6);

  /* ── ALIASES COMPATIBILITÉ (pour skills.css, interview.css…) ─ */
  --space-xs:    var(--space-2);    /*  8px */
  --space-sm:    var(--space-4);    /* 16px */
  --space-md:    var(--space-6);    /* 24px */
  --space-lg:    var(--space-10);   /* 40px */
  --space-xl:    var(--space-16);   /* 64px */
  --shadow-card: var(--shadow-md);

}

/* ── MEDIA QUERIES — Ajustements responsive ──────────────── */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 220px;
    --grid-cols-4: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width:    0px;
    --header-height:    56px;
    --grid-cols-3:      repeat(2, 1fr);
    --grid-cols-4:      repeat(2, 1fr);
    --font-size-3xl:    1.75rem;
    --font-size-4xl:    2.25rem;
    --font-size-5xl:    3rem;
    --space-16:         3rem;
    --space-20:         4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --grid-cols-2: repeat(1, 1fr);
    --grid-cols-3: repeat(1, 1fr);
    --grid-cols-4: repeat(1, 1fr);
    --radius-card: var(--radius-xl);
    --radius-modal: var(--radius-2xl);
  }
}

/* ── THÈME SOMBRE (optionnel, activable via JS) ──────────── */
[data-theme="dark"] {
  --color-bg:             #09090F;
  --color-bg-alt:         #0D0D1A;
  --color-surface:        #111127;
  --color-surface-2:      #181830;
  --color-surface-3:      #20203D;
  --color-border:         rgba(108, 99, 255, 0.18);
  --color-border-subtle:  rgba(255, 255, 255, 0.06);

  --color-text:           #E8E8FF;
  --color-text-muted:     #8888BB;
  --color-text-faint:     #555577;
  --color-text-inverse:   #09090F;

  --glass-bg:             rgba(17, 17, 39, 0.75);
  --glass-bg-light:       rgba(255, 255, 255, 0.04);
  --glass-border:         rgba(255, 255, 255, 0.08);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.7);

  --shadow-primary:   0 8px 32px rgba(108, 99, 255, 0.25);
  --shadow-secondary: 0 8px 32px rgba(255, 101, 132, 0.25);
  --shadow-accent:    0 8px 32px rgba(67, 233, 123, 0.25);
  --shadow-warning:   0 8px 32px rgba(255, 209, 102, 0.25);
  --shadow-danger:    0 8px 32px rgba(239, 71, 111, 0.25);
}