/* ============================================================
   Design Tokens — Portfolio Paul-Basthylle Masse Masse
   7 thèmes : bleu (défaut), blanc, noir, bleu-ciel, vert-citron, jaune, rouge
   ============================================================ */

/* ── Thème BLEU (défaut) ──────────────────────────────── */
/* ── Thème par défaut : BLANC (clair) ─────────────────── */
:root,
[data-theme="blanc"] {
    --color-primary:     #667eea;
    --color-secondary:   #764ba2;
    --color-accent:      #06B6D4;
    --color-orange:      #ff6b35;
    --color-warm:        #f7931e;

    --bg-dark:           #F8FAFC;
    --bg-card:           #FFFFFF;
    --bg-card-hover:     #F1F5F9;
    --bg-surface:        #EEF2FF;

    --text-primary:      #1E293B;
    --text-secondary:    #475569;
    --text-muted:        #94A3B8;

    --border-color:      rgba(102, 126, 234, 0.15);
    --border-hover:      rgba(102, 126, 234, 0.45);

    --gradient-hero:     linear-gradient(135deg, #ff6b35 0%, #f7931e 30%, #667eea 70%, #2196F3 100%);
    --gradient-main:     linear-gradient(135deg, #667eea, #764ba2);
    --gradient-warm:     linear-gradient(135deg, #ff6b35, #f7931e);

    --shadow:            0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover:      0 20px 40px rgba(0, 0, 0, 0.14);
    --shadow-card:       0 4px 24px rgba(102, 126, 234, 0.08);

    --theme-label:       "Blanc";
}

/* ── Thème BLEU (sombre) ──────────────────────────────── */
[data-theme="bleu"] {
    --color-primary:     #3B82F6;
    --color-secondary:   #6366F1;
    --color-accent:      #06B6D4;
    --color-orange:      #F97316;
    --color-warm:        #FB923C;

    --bg-dark:           #0A0E1A;
    --bg-card:           #111827;
    --bg-card-hover:     #1A2235;
    --bg-surface:        #0F1724;

    --text-primary:      #F0F4FF;
    --text-secondary:    #8892A4;
    --text-muted:        #4A5568;

    --border-color:      rgba(59, 130, 246, 0.2);
    --border-hover:      rgba(59, 130, 246, 0.5);

    --gradient-hero:     linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #6366F1 100%);
    --gradient-main:     linear-gradient(135deg, #3B82F6, #6366F1);
    --gradient-warm:     linear-gradient(135deg, #F97316, #FB923C);

    --shadow:            0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-hover:      0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.4);

    --theme-label:       "Bleu";
}

/* [data-theme="blanc"] est maintenant le défaut dans :root */

/* ── Thème NOIR ───────────────────────────────────────── */
[data-theme="noir"] {
    --color-primary:     #E2E8F0;
    --color-secondary:   #94A3B8;
    --color-accent:      #CBD5E1;

    --bg-dark:           #000000;
    --bg-card:           #0D0D0D;
    --bg-card-hover:     #1A1A1A;
    --bg-surface:        #080808;

    --text-primary:      #F8FAFC;
    --text-secondary:    #94A3B8;
    --text-muted:        #475569;

    --border-color:      rgba(255, 255, 255, 0.08);
    --border-hover:      rgba(255, 255, 255, 0.2);

    --gradient-hero:     linear-gradient(135deg, #1a1a1a, #333, #1a1a1a);
    --gradient-main:     linear-gradient(135deg, #E2E8F0, #94A3B8);
    --gradient-warm:     linear-gradient(135deg, #CBD5E1, #E2E8F0);
    --shadow:            0 10px 30px rgba(0,0,0,0.6);
    --shadow-hover:      0 20px 40px rgba(0,0,0,0.7);
    --shadow-card:       0 4px 24px rgba(0,0,0,0.5);
    --color-orange:      #CBD5E1;
    --theme-label:       "Noir";
    --theme-emoji:       "⚫";
}

/* ── Thème BLEU-CIEL ──────────────────────────────────── */
[data-theme="bleu-ciel"] {
    --color-primary:     #00D4FF;
    --color-secondary:   #38BDF8;
    --color-accent:      #7DD3FC;

    --bg-dark:           #0A1628;
    --bg-card:           #0F2137;
    --bg-card-hover:     #163050;
    --bg-surface:        #071120;

    --text-primary:      #E0F7FF;
    --text-secondary:    #7ABFCF;
    --text-muted:        #3A7A8E;

    --border-color:      rgba(0, 212, 255, 0.2);
    --border-hover:      rgba(0, 212, 255, 0.5);

    --gradient-hero:     linear-gradient(135deg, #0A1628, #00D4FF 60%, #38BDF8);
    --gradient-main:     linear-gradient(135deg, #00D4FF, #38BDF8);
    --gradient-warm:     linear-gradient(135deg, #38BDF8, #7DD3FC);
    --shadow:            0 10px 30px rgba(0,0,0,0.4);
    --shadow-hover:      0 20px 40px rgba(0,0,0,0.5);
    --shadow-card:       0 4px 24px rgba(0,0,0,0.4);
    --color-orange:      #38BDF8;
    --theme-label:       "Bleu Ciel";
    --theme-emoji:       "🔵";
}

/* ── Thème VERT-CITRON ────────────────────────────────── */
[data-theme="vert-citron"] {
    --color-primary:     #84CC16;
    --color-secondary:   #22C55E;
    --color-accent:      #A3E635;

    --bg-dark:           #0D1A05;
    --bg-card:           #111F07;
    --bg-card-hover:     #182B0A;
    --bg-surface:        #0A1403;

    --text-primary:      #F0FDF4;
    --text-secondary:    #86EFAC;
    --text-muted:        #4ADE80;

    --border-color:      rgba(132, 204, 22, 0.2);
    --border-hover:      rgba(132, 204, 22, 0.5);

    --gradient-hero:     linear-gradient(135deg, #0D1A05, #84CC16 60%, #22C55E);
    --gradient-main:     linear-gradient(135deg, #84CC16, #22C55E);
    --gradient-warm:     linear-gradient(135deg, #22C55E, #A3E635);
    --shadow:            0 10px 30px rgba(0,0,0,0.4);
    --shadow-hover:      0 20px 40px rgba(0,0,0,0.5);
    --shadow-card:       0 4px 24px rgba(0,0,0,0.4);
    --color-orange:      #A3E635;
    --theme-label:       "Vert Citron";
    --theme-emoji:       "🟢";
}

/* ── Thème JAUNE ──────────────────────────────────────── */
[data-theme="jaune"] {
    --color-primary:     #FACC15;
    --color-secondary:   #F59E0B;
    --color-accent:      #FDE68A;

    --bg-dark:           #1A1400;
    --bg-card:           #231C00;
    --bg-card-hover:     #2E2400;
    --bg-surface:        #130F00;

    --text-primary:      #FEFCE8;
    --text-secondary:    #FDE68A;
    --text-muted:        #A16207;

    --border-color:      rgba(250, 204, 21, 0.2);
    --border-hover:      rgba(250, 204, 21, 0.5);

    --gradient-hero:     linear-gradient(135deg, #1A1400, #FACC15 60%, #F59E0B);
    --gradient-main:     linear-gradient(135deg, #FACC15, #F59E0B);
    --gradient-warm:     linear-gradient(135deg, #F59E0B, #FDE68A);
    --shadow:            0 10px 30px rgba(0,0,0,0.4);
    --shadow-hover:      0 20px 40px rgba(0,0,0,0.5);
    --shadow-card:       0 4px 24px rgba(0,0,0,0.4);
    --color-orange:      #F59E0B;
    --theme-label:       "Jaune";
    --theme-emoji:       "🟡";
}

/* ── Thème ROUGE ──────────────────────────────────────── */
[data-theme="rouge"] {
    --color-primary:     #F87171;
    --color-secondary:   #EF4444;
    --color-accent:      #FCA5A5;

    --bg-dark:           #1A0505;
    --bg-card:           #230808;
    --bg-card-hover:     #2E0E0E;
    --bg-surface:        #130303;

    --text-primary:      #FFF1F1;
    --text-secondary:    #FCA5A5;
    --text-muted:        #7F1D1D;

    --border-color:      rgba(248, 113, 113, 0.2);
    --border-hover:      rgba(248, 113, 113, 0.5);

    --gradient-hero:     linear-gradient(135deg, #1A0505, #F87171 60%, #EF4444);
    --gradient-main:     linear-gradient(135deg, #F87171, #EF4444);
    --gradient-warm:     linear-gradient(135deg, #EF4444, #FCA5A5);
    --shadow:            0 10px 30px rgba(0,0,0,0.4);
    --shadow-hover:      0 20px 40px rgba(0,0,0,0.5);
    --shadow-card:       0 4px 24px rgba(0,0,0,0.4);
    --color-orange:      #FCA5A5;
    --theme-label:       "Rouge";
    --theme-emoji:       "🔴";
}

/* ── Domaines couleurs (stables) ──────────────────────── */
:root, [data-theme] {
    --domain-web:        #3B82F6;
    --domain-streaming:  #F97316;
    --domain-iot:        #10B981;
    --domain-devops:     #8B5CF6;
    --domain-securite:   #F59E0B;
    --domain-analyse:    #EC4899;
    --domain-ia:         #A855F7;
    --domain-academique: #06B6D4;

    /* Spacing */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   48px;
    --space-2xl:  80px;

    /* Border radius */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  32px;

    /* Fonts */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* Transitions */
    --transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(var(--color-primary), 0.15);

    /* Navbar */
    --navbar-height: 70px;
}