/* =============================================
   CYBERHUB - DESIGN SYSTEM / THEMES
   Tokens partagés + thème dark (cyber) et light (corporate)
   Chargé AVANT les autres feuilles de style.
   ============================================= */

:root {
    /* Red Team Colors */
    --red-primary: #DC2626;
    --red-dark: #991B1B;
    --red-light: #FEE2E2;
    --red-accent: #EF4444;

    /* Blue Team Colors */
    --blue-primary: #2563EB;
    --blue-dark: #1E40AF;
    --blue-light: #DBEAFE;
    --blue-accent: #3B82F6;

    /* Functional Colors */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* Constantes (identiques dans les deux thèmes) */
    --white: #FFFFFF;           /* texte sur fonds colorés/dégradés */
    --ink: #0F172A;             /* encre profonde */

    /* Layout */
    --sidebar-width: 280px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* =============================================
   THÈME DARK (cyber) — défaut
   ============================================= */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces profondes */
    --dark: #0F172A;
    --dark-secondary: #1E293B;

    /* Rampe de gris (sombre → clair) */
    --gray-900: #111827;
    --gray-800: #1F2937;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;

    /* Sémantique */
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-tertiary: var(--gray-700);
    --text-primary: #FFFFFF;
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-500);
    --border: var(--gray-700);

    /* Overlays (voile clair sur surfaces sombres) */
    --overlay-02: rgba(255, 255, 255, 0.02);
    --overlay-03: rgba(255, 255, 255, 0.03);
    --overlay-04: rgba(255, 255, 255, 0.04);
    --overlay-05: rgba(255, 255, 255, 0.05);
    --overlay-06: rgba(255, 255, 255, 0.06);
    --overlay-07: rgba(255, 255, 255, 0.07);
    --overlay-08: rgba(255, 255, 255, 0.08);
    --overlay-10: rgba(255, 255, 255, 0.10);
    --overlay-15: rgba(255, 255, 255, 0.15);
    --overlay-20: rgba(255, 255, 255, 0.20);
    --overlay-40: rgba(255, 255, 255, 0.40);

    /* Ombrages (noir) */
    --shade-15: rgba(0, 0, 0, 0.15);
    --shade-20: rgba(0, 0, 0, 0.2);
    --shade-30: rgba(0, 0, 0, 0.3);
    --shade-40: rgba(0, 0, 0, 0.4);
    --shade-50: rgba(0, 0, 0, 0.5);
    --backdrop: rgba(0, 0, 0, 0.7);
    --loading-overlay: rgba(15, 23, 42, 0.9);

    /* Shadows */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-red: 0 0 30px rgba(220, 38, 38, 0.3);
    --shadow-blue: 0 0 30px rgba(37, 99, 235, 0.3);
}

/* =============================================
   THÈME LIGHT (corporate)
   La rampe de gris est inversée : les composants écrits
   pour le dark gardent leurs rapports de contraste.
   ============================================= */
:root[data-theme="light"] {
    color-scheme: light;

    /* Surfaces "profondes" (blocs code, VNC) restent sombres */
    --dark: #0F172A;
    --dark-secondary: #1E293B;

    /* Rampe de gris inversée (slate, plus corporate) */
    --gray-900: #F8FAFC;
    --gray-800: #FFFFFF;
    --gray-700: #E2E8F0;
    --gray-600: #CBD5E1;
    --gray-500: #64748B;
    --gray-400: #475569;
    --gray-300: #334155;
    --gray-200: #1E293B;
    --gray-100: #0F172A;
    --gray-50: #0B1220;

    /* Sémantique */
    --bg-primary: #F4F6FA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EDF1F7;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --border: #E2E8F0;

    /* Overlays (voile sombre sur surfaces claires) */
    --overlay-02: rgba(15, 23, 42, 0.02);
    --overlay-03: rgba(15, 23, 42, 0.03);
    --overlay-04: rgba(15, 23, 42, 0.04);
    --overlay-05: rgba(15, 23, 42, 0.05);
    --overlay-06: rgba(15, 23, 42, 0.06);
    --overlay-07: rgba(15, 23, 42, 0.07);
    --overlay-08: rgba(15, 23, 42, 0.08);
    --overlay-10: rgba(15, 23, 42, 0.10);
    --overlay-15: rgba(15, 23, 42, 0.15);
    --overlay-20: rgba(15, 23, 42, 0.20);
    --overlay-40: rgba(15, 23, 42, 0.40);

    /* Ombrages adoucis */
    --shade-15: rgba(15, 23, 42, 0.06);
    --shade-20: rgba(15, 23, 42, 0.08);
    --shade-30: rgba(15, 23, 42, 0.10);
    --shade-40: rgba(15, 23, 42, 0.12);
    --shade-50: rgba(15, 23, 42, 0.18);
    --backdrop: rgba(15, 23, 42, 0.45);
    --loading-overlay: rgba(244, 246, 250, 0.9);

    /* Shadows discrètes, style SaaS */
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05);
    --shadow-red: 0 4px 16px rgba(220, 38, 38, 0.18);
    --shadow-blue: 0 4px 16px rgba(37, 99, 235, 0.18);
}

/* =============================================
   AJUSTEMENTS LIGHT — composants
   ============================================= */

/* Sidebar : surface claire unie au lieu du dégradé sombre */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .admin-sidebar {
    background: #FFFFFF;
    border-right: 1px solid var(--border);
}

:root[data-theme="light"] .top-bar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

/* Blocs code : restent sombres (lisibilité + look pro) */
:root[data-theme="light"] .markdown-content pre,
:root[data-theme="light"] .markdown-content pre code {
    color: #D1D5DB;
}

/* Glows atténués sur fond clair */
:root[data-theme="light"] [class*="glow"] {
    animation: none;
}

/* Logo Caplogy : blanc forcé en dark, encre en light */
:root[data-theme="light"] .caplogy-logo-img {
    filter: brightness(0);
    opacity: 0.75;
}

/* Logo CyberHub : deux exports (texte blanc / texte encre), bascule par thème */
.brand-logo-img {
    height: 30px;
    width: auto;
    display: block;
}

.login-logo .brand-logo-img {
    height: 40px;
}

.brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="light"] .brand-logo-light { display: block; }

/* Pastels des puces : nuances foncées pour le contraste sur clair */
:root[data-theme="light"] .red-team .subcat-tag { color: #B91C1C; }
:root[data-theme="light"] .blue-team .subcat-tag { color: #1D4ED8; }
:root[data-theme="light"] .hackathon-team .subcat-tag { color: #B45309; }
:root[data-theme="light"] .nav-section-header:has(#chevron-competitions) .nav-section-title { color: #B45309; }
:root[data-theme="light"] .ctf-countdown-timer .time-value { color: #B45309; }
:root[data-theme="light"] .ctf-countdown-status.upcoming { color: #B45309; }

/* =============================================
   THEME TOGGLE
   ============================================= */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--bg-tertiary);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Variante flottante (pages sans top-bar, ex: admin) */
.theme-toggle--floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

/* =============================================
   ICÔNES SVG (remplacement des émojis)
   ============================================= */
.svg-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Couleurs sémantiques */
.ic-red { color: #EF4444; }
.ic-blue { color: #3B82F6; }
.ic-green { color: #10B981; }
.ic-amber { color: #F59E0B; }
.ic-orange { color: #F97316; }
.ic-purple { color: #8B5CF6; }
.ic-gray { color: #9CA3AF; }
.ic-dark { color: #4B5563; }
.ic-gold { color: #FBBF24; }
.ic-silver { color: #94A3B8; }
.ic-bronze { color: #CD7F32; }

:root[data-theme="light"] .ic-gold { color: #D97706; }
:root[data-theme="light"] .ic-gray { color: #64748B; }
:root[data-theme="light"] .ic-dark { color: #334155; }

/* Sur fonds colorés (toasts...), l'icône suit le texte */
.toast-notification .svg-icon,
.ctf-toast .svg-icon,
.btn-primary .svg-icon,
.btn-danger .svg-icon {
    color: inherit;
}

/* =============================================
   POLISH GLOBAL (les deux thèmes)
   ============================================= */

::selection {
    background: rgba(37, 99, 235, 0.35);
}

:root[data-theme="light"] ::selection {
    background: rgba(37, 99, 235, 0.18);
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-500) transparent;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gray-500), var(--gray-600));
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--red-primary), var(--red-dark));
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Focus visible accessible */
:focus-visible {
    outline: 2px solid var(--blue-accent);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}