/* ============================================
   VAN-DIGITAL — variables.css
   Branding : élégant, tech, féminin
   Polices  : Playfair Display (titres) + DM Sans (corps)
   Primaire : #6E17E0 violet
   ============================================ */

/* ══ THÈME SOMBRE (défaut) ══════════════════ */
:root,
[data-theme="dark"] {
    /* ── Couleur principale ── */
    --vd-primary:     #6E17E0;
    --vd-primary-l:   #9B59F5;   /* violet clair — textes sur fond sombre */
    --vd-primary-d:   #4D0FB0;   /* violet foncé */
    --vd-primary-rgb: 110,23,224;

    /* ── Fonds ── */
    --vd-bg:       #0D0B14;   /* presque noir, légèrement violacé */
    --vd-bg2:      #12101C;
    --vd-bg3:      #181525;
    --vd-surface:  #1E1A2E;   /* carte / surface */
    --vd-surface2: #251F3A;

    /* ── Bordures ── */
    --vd-border:  rgba(110,23,224,0.20);
    --vd-border2: rgba(110,23,224,0.40);

    /* ── Textes — toujours lisibles sur fond sombre ── */
    --vd-white:  #F0ECFF;     /* titres principaux */
    --vd-text:   #DDD8F5;     /* texte courant */
    --vd-text2:  #B8B0D8;     /* texte secondaire */
    --vd-gray:   #7A7098;     /* atténué */
    --vd-gray2:  #4E4668;     /* très atténué */

    /* ── Status ── */
    --vd-success: #34D399;
    --vd-error:   #F87171;
    --vd-warning: #FBB045;

    /* ── Gradients ── */
    --grad-primary: linear-gradient(135deg, #4D0FB0 0%, #6E17E0 60%, #9B59F5 100%);
    --grad-btn:     linear-gradient(135deg, #6E17E0 0%, #9B59F5 100%);
    --grad-hero:    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(110,23,224,0.18) 0%, transparent 75%);
    --grad-card:    linear-gradient(160deg, rgba(110,23,224,0.10) 0%, transparent 100%);
    --grad-accent:  linear-gradient(90deg, #6E17E0, #C084FC);

    /* ── Ombres ── */
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.4);
    --shadow-primary: 0 4px 24px rgba(110,23,224,0.35);
    --shadow-card:    0 4px 24px rgba(0,0,0,0.5);
    --shadow-hover:   0 8px 32px rgba(110,23,224,0.40);
    --shadow-glow:    0 0 30px rgba(110,23,224,0.25);

    /* ── Nav ── */
    --nav-bg:    rgba(13,11,20,0.97);
    --header-bg: rgba(13,11,20,0.97);
}

/* ══ THÈME CLAIR ══════════════════════════ */
[data-theme="light"] {
    --vd-primary:     #6E17E0;
    --vd-primary-l:   #5210B3;   /* violet foncé — lisible sur fond clair */
    --vd-primary-d:   #3D0D8A;
    --vd-primary-rgb: 110,23,224;

    /* ── Fonds ── */
    --vd-bg:       #FAF8FF;
    --vd-bg2:      #F3F0FF;
    --vd-bg3:      #EDE8FF;
    --vd-surface:  #FFFFFF;
    --vd-surface2: #F7F4FF;

    /* ── Bordures ── */
    --vd-border:  rgba(110,23,224,0.15);
    --vd-border2: rgba(110,23,224,0.30);

    /* ── Textes — toujours lisibles sur fond clair ── */
    --vd-white:  #1A0D3D;     /* titres — violet très foncé, pas noir */
    --vd-text:   #2A1860;     /* texte courant */
    --vd-text2:  #3D2878;     /* texte secondaire */
    --vd-gray:   #6550A0;     /* atténué mais lisible */
    --vd-gray2:  #9080C0;     /* très atténué */

    /* ── Status ── */
    --vd-success: #15803D;
    --vd-error:   #DC2626;
    --vd-warning: #B45309;

    /* ── Gradients ── */
    --grad-primary: linear-gradient(135deg, #3D0D8A 0%, #6E17E0 60%, #8B3FF5 100%);
    --grad-btn:     linear-gradient(135deg, #6E17E0 0%, #8B3FF5 100%);
    --grad-hero:    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(110,23,224,0.10) 0%, transparent 75%);
    --grad-card:    linear-gradient(160deg, rgba(110,23,224,0.07) 0%, transparent 100%);
    --grad-accent:  linear-gradient(90deg, #5210B3, #8B3FF5);

    /* ── Ombres ── */
    --shadow-sm:      0 2px 8px rgba(110,23,224,0.08);
    --shadow-primary: 0 4px 24px rgba(110,23,224,0.22);
    --shadow-card:    0 4px 24px rgba(110,23,224,0.10);
    --shadow-hover:   0 8px 32px rgba(110,23,224,0.28);
    --shadow-glow:    0 0 24px rgba(110,23,224,0.15);

    /* ── Nav ── */
    --nav-bg:    rgba(250,248,255,0.98);
    --header-bg: rgba(250,248,255,0.98);
}

/* ══ THÈME NEON ════════════════════════════ */
[data-theme="neon"] {
    --vd-primary:     #7B00FF;
    --vd-primary-l:   #A855F7;
    --vd-primary-d:   #5800CC;
    --vd-primary-rgb: 123,0,255;

    --vd-bg:       #04020E;
    --vd-bg2:      #080518;
    --vd-bg3:      #0E0825;
    --vd-surface:  #140E30;
    --vd-surface2: #1C1540;

    --vd-border:  rgba(123,0,255,0.25);
    --vd-border2: rgba(123,0,255,0.55);

    --vd-white:  #EEE8FF;
    --vd-text:   #D8CCFF;
    --vd-text2:  #B0A0E8;
    --vd-gray:   #6A58A8;
    --vd-gray2:  #4A3880;

    --vd-success: #00FFA3;
    --vd-error:   #FF4466;
    --vd-warning: #FFB800;

    --grad-primary: linear-gradient(135deg, #5800CC 0%, #7B00FF 50%, #A855F7 100%);
    --grad-btn:     linear-gradient(135deg, #7B00FF 0%, #C084FC 50%, #00D4FF 100%);
    --grad-hero:    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(123,0,255,0.28) 0%, transparent 75%);
    --grad-card:    linear-gradient(160deg, rgba(123,0,255,0.15) 0%, transparent 100%);
    --grad-accent:  linear-gradient(90deg, #7B00FF, #00D4FF);

    --shadow-sm:      0 2px 8px rgba(123,0,255,0.2);
    --shadow-primary: 0 0 30px rgba(123,0,255,0.55), 0 4px 24px rgba(123,0,255,0.3);
    --shadow-card:    0 4px 24px rgba(123,0,255,0.18);
    --shadow-hover:   0 0 45px rgba(123,0,255,0.65), 0 8px 32px rgba(0,212,255,0.2);
    --shadow-glow:    0 0 40px rgba(123,0,255,0.4);

    --nav-bg:    rgba(4,2,14,0.98);
    --header-bg: rgba(4,2,14,0.98);
}

/* ══ VARIABLES COMMUNES ════════════════════ */
:root {
    /* ── Typographie — élégante + tech ── */
    --font-h: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --font-b: 'DM Sans', 'Inter', system-ui, sans-serif;
    --font-mono: 'DM Mono', 'Fira Code', monospace;

    /* ── Rayons ── */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  40px;
    --r-full: 9999px;

    /* ── Transitions ── */
    --t-fast:   0.15s ease;
    --t-normal: 0.25s ease;
    --t-slow:   0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}