/**
 * ============================================================================
 * ARTSHIELD INTERNATIONAL V2.0 — VARIABLES THÈME LIGHT / DARK
 * ============================================================================
 *
 * Palette Marine + Bordeaux + Or
 * Double thème : Light institutionnel + Dark glassmorphism
 * Utilisé en complément de Tailwind CSS (CDN)
 *
 * @package    ArtShield
 * @version    2.0.0
 * ============================================================================
 */

/* ═══════════════════════════════════════════════════════════════════════════
   THÈME CLAIR (défaut)
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
    /* Couleurs principales */
    --color-marine:       #0C1B2A;
    --color-bordeaux:     #7B1E3A;
    --color-or:           #C8A951;
    --color-acier:        #2B6CB0;

    /* Surfaces */
    --bg-primary:         #F7F8FA;
    --bg-secondary:       #FFFFFF;
    --bg-card:            #FFFFFF;
    --bg-sidebar:         #0C1B2A;
    --bg-header:          #FFFFFF;
    --bg-input:           #F1F5F9;
    --bg-hover:           #F1F5F9;
    --bg-active:          #E2E8F0;
    --bg-code:            #F1F5F9;
    --bg-tooltip:         #0C1B2A;

    /* Texte */
    --text-primary:       #1A202C;
    --text-secondary:     #4A5568;
    --text-tertiary:      #718096;
    --text-muted:         #A0AEC0;
    --text-inverse:       #F7FAFC;
    --text-link:          #2B6CB0;
    --text-link-hover:    #1A4F8B;

    /* Bordures */
    --border-primary:     #E2E8F0;
    --border-secondary:   #CBD5E0;
    --border-focus:       #C8A951;
    --border-subtle:      #EDF2F7;

    /* Ombres */
    --shadow-sm:          0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:          0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg:          0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl:          0 20px 25px rgba(0,0,0,0.1);
    --shadow-card:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card-hover:  0 10px 20px rgba(0,0,0,0.08);

    /* Statuts — Badges */
    --color-verified:     #059669;
    --color-suspect:      #D97706;
    --color-blacklisted:  #DC2626;
    --color-investigation:#3B82F6;
    --color-unverified:   #6B7280;

    /* Statuts — Feedback */
    --color-success:      #059669;
    --color-warning:      #D97706;
    --color-danger:       #DC2626;
    --color-info:         #3B82F6;

    /* Glassmorphism (léger en mode clair) */
    --glass-bg:           rgba(255, 255, 255, 0.7);
    --glass-border:       rgba(0, 0, 0, 0.06);
    --glass-blur:         blur(8px);

    /* Gradients */
    --gradient-primary:   linear-gradient(135deg, #0C1B2A 0%, #1A3A5C 100%);
    --gradient-accent:    linear-gradient(135deg, #7B1E3A 0%, #A62B50 100%);
    --gradient-gold:      linear-gradient(135deg, #C8A951 0%, #E0C76A 100%);
    --gradient-hero:      linear-gradient(135deg, #0C1B2A 0%, #142D4A 50%, #1A3A5C 100%);

    /* Sidebar (toujours sombre) */
    --sidebar-bg:         #0C1B2A;
    --sidebar-text:       #94A3B8;
    --sidebar-text-active:#FFFFFF;
    --sidebar-hover:      rgba(255,255,255,0.05);
    --sidebar-active:     rgba(200,169,81,0.1);
    --sidebar-border:     rgba(255,255,255,0.06);
    --sidebar-icon:       #64748B;
    --sidebar-icon-active:#C8A951;

    /* Scrollbar */
    --scrollbar-track:    #F1F5F9;
    --scrollbar-thumb:    #CBD5E0;
    --scrollbar-hover:    #A0AEC0;

    /* Transitions */
    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;
    --transition-slow:    400ms ease;

    /* Border radius */
    --radius-sm:          6px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-2xl:         24px;
    --radius-full:        9999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THÈME SOMBRE (glassmorphism)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    /* Surfaces */
    --bg-primary:         #080E18;
    --bg-secondary:       #0C1B2A;
    --bg-card:            rgba(12, 27, 42, 0.6);
    --bg-sidebar:         #060C14;
    --bg-header:          rgba(8, 14, 24, 0.8);
    --bg-input:           rgba(255, 255, 255, 0.05);
    --bg-hover:           rgba(255, 255, 255, 0.05);
    --bg-active:          rgba(255, 255, 255, 0.08);
    --bg-code:            rgba(255, 255, 255, 0.06);
    --bg-tooltip:         #1A2332;

    /* Texte */
    --text-primary:       #F7FAFC;
    --text-secondary:     #CBD5E0;
    --text-tertiary:      #94A3B8;
    --text-muted:         #64748B;
    --text-inverse:       #0C1B2A;
    --text-link:          #60A5FA;
    --text-link-hover:    #93C5FD;

    /* Bordures */
    --border-primary:     rgba(255, 255, 255, 0.06);
    --border-secondary:   rgba(255, 255, 255, 0.1);
    --border-focus:       rgba(200, 169, 81, 0.5);
    --border-subtle:      rgba(255, 255, 255, 0.03);

    /* Ombres */
    --shadow-sm:          0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:          0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg:          0 10px 15px rgba(0,0,0,0.4);
    --shadow-xl:          0 20px 25px rgba(0,0,0,0.5);
    --shadow-card:        0 8px 32px rgba(0,0,0,0.2);
    --shadow-card-hover:  0 16px 48px rgba(0,0,0,0.3);

    /* Glassmorphism */
    --glass-bg:           rgba(12, 27, 42, 0.4);
    --glass-border:       rgba(200, 169, 81, 0.08);
    --glass-blur:         blur(16px) saturate(180%);

    /* Gradients */
    --gradient-hero:      linear-gradient(135deg, #060C14 0%, #0C1B2A 50%, #122240 100%);

    /* Sidebar */
    --sidebar-bg:         #060C14;
    --sidebar-hover:      rgba(255,255,255,0.03);
    --sidebar-active:     rgba(200,169,81,0.08);
    --sidebar-border:     rgba(255,255,255,0.04);

    /* Scrollbar */
    --scrollbar-track:    #0C1B2A;
    --scrollbar-thumb:    #1E3A5F;
    --scrollbar-hover:    #2B6CB0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITAIRES CSS PERSONNALISÉS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Classe de carte glassmorphism */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.glass-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.glass-card-intense {
    background: rgba(12, 27, 42, 0.6);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Carte standard (thème-aware) */
.as-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-normal);
}

.as-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Boutons */
.btn-primary {
    background: var(--gradient-gold);
    color: var(--color-marine);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(200, 169, 81, 0.3);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
}

.btn-danger {
    background: linear-gradient(135deg, #DC2626, #EF4444);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-danger:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Inputs */
.as-input {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
    transition: all var(--transition-fast);
    outline: none;
    width: 100%;
}

.as-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.15);
}

.as-input::placeholder {
    color: var(--text-muted);
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

/* Transitions de thème */
body,
.as-card,
.glass-card,
.as-input,
nav,
header,
aside {
    transition: background-color var(--transition-slow),
                color var(--transition-slow),
                border-color var(--transition-slow),
                box-shadow var(--transition-slow);
}