:root {

    /* ==========================
       :ROOT — Variables based on Poster Colors
       ========================== */
    :root {

     /* Primary: The main sky-blue from the poster */
    --accent: #0099FF;

    /* Secondary: The flag red */
    --accent-red: #FF0000;

    /* Tertiary: The flag green */
    --accent-green: #00CC00;

    /* Glass backgrounds (keeping the white/transparent feel but tinted blue) */
    --bg-white: rgba(0, 210, 255, 0.25);
    --bg-white-heavy: rgba(0, 210, 255, 0.25);
    --bg-card: rgba(0, 210, 255, 0.35);
    --bg-input: rgba(0, 210, 255, 0.25);
    --bg-hover: rgba(0, 210, 255, 0.18);

    /* Bordures (Using poster blue) */
    --border-color: rgba(0, 210, 255, 0.25);
    --border-strong: rgba(0, 180, 220, 0.45);

    /* Accent & Hovers */
    --accent: #0099FF; /* Poster Blue */
    --accent-hover: #FF0000; /* Poster Red */

    /* Text (Poster uses Black & White) */
    --text-color: #111827;
    --text-muted: rgba(17, 24, 39, 0.55);

    /* Aurora (Using poster colors: Blue, Red, Green) */
    --aurora-cyan: rgba(0, 180, 220, 0.4); /* Deep Blue */
    --aurora-pink: rgba(255, 110, 199, 0.35); /* Red accent */
    --aurora-purple: rgba(120, 90, 200, 0.35); /* Soft purple for depth */
    --aurora-green: rgba(0, 200, 120, 0.25); /* Flag Green */
    --header-gradient-start: rgba(0, 50, 50, 0.78); /* Deep Red */
    --header-gradient-end: rgba(0, 180, 255, 0.6); /* Light Blue */


}

/* ==========================
   BODY — Backgrounds
========================== */
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

}

/* Couche animée subtile (Poster colors) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(circle at 25% 25%, var(--aurora-cyan), transparent 50%),
        radial-gradient(circle at 75% 35%, var(--accent-red), transparent 50%),
        radial-gradient(circle at 50% 75%, var(--accent-green), transparent 50%);

    background-size: 200% 200%;
    background-repeat: no-repeat;
    background-blend-mode: screen;

    filter: blur(60px) saturate(140%) contrast(110%);
    animation: softAurora 30s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes softAurora {
    0%   { background-position: 0% 50%, 0% 0%, 0% 0%; }
    50%  { background-position: 50% 10%, 50% 20%, 50% 30%; }
    100% { background-position: 0% 50%, 0% 0%, 0% 0%; }
}

/* ==========================
   #APP — Glass doux
========================== */
#app {
    position: relative;
    min-height: 100vh;

    background: rgba(0, 210, 255, 0.08);
    backdrop-filter: blur(20px) saturate(140%) contrast(105%);
    -webkit-backdrop-filter: blur(20px) saturate(140%) contrast(105%);

    box-shadow: inset 0 0 80px rgba(0,0,0,0.15);
    border-radius: 16px;
}

/* Colors - CARIFTA 2026 theme */
:root {
    --text-color: #0f172a; /* noir bleuté */
    --text-muted: #6b7280;

    --bg-white: rgba(255, 255, 255, 0.65);
    --bg-white-heavy: rgba(255, 255, 255, 0.75);
    --bg-card: rgba(255, 255, 255, 0.5);
    --bg-input: rgba(248, 250, 252, 0.8);
    --bg-hover: rgba(241, 245, 249, 0.7);

    --border-color: rgba(203, 213, 225, 0.5);
    --border-strong: rgba(148, 163, 184, 0.6);

    /* Accent principal = bleu du logo */
    --accent: #5fa8dc;
    --accent-hover: #3b82c4;
    --accent-light: rgba(95, 168, 220, 0.15);

    /* Couleurs secondaires logo */
    --accent-red: #e11d2e;
    --accent-green: #15803d;
    --accent-black: #111827;

    /* Podium (légèrement harmonisé avec le thème) */
    --podium-gold: #fbbf24;
    --podium-silver: #94a3b8;
    --podium-bronze: #b45309;

    /* Sexe */
    --sexe-m-bg: rgba(219, 234, 254, 0.8);
    --sexe-m-color: #2563eb;

    --sexe-f-bg: rgba(254, 226, 226, 0.8);
    --sexe-f-color: #dc2626;

    /* Header / Footer (reprend le noir du logo) */
    --footer-bg: rgba(17, 24, 39, 0.9);
    --footer-text: rgba(255, 255, 255, 0.75);
    --footer-link: rgba(255, 255, 255, 0.95);

    --header-gradient-start: rgba(17, 24, 39, 0.85);
    --header-gradient-end: rgba(17, 24, 39, 0.6);

    /* États */
    --live-badge: #dc2626;
    --new-arrival: #16a34a;

    /* Boutons */
    --btn-diploma: #fbbf24;
    --btn-diploma-hover: #f59e0b;

    --btn-fb: #4267b2;
    --btn-fb-hover: #365899;

    --btn-tw: #1da1f2;
    --btn-tw-hover: #0d8ddb;

    --btn-wa: #25d366;
    --btn-wa-hover: #1fb855;

    --btn-copy: #64748b;
    --btn-copy-hover: #475569;

    /* CTA principal en bleu */
    --btn-tracking: #3b82c4;
    --btn-tracking-hover: #2563eb;

    /* Tags */
    --dossard-color: #5fa8dc; /* bleu logo */
    --club-color: #475569;
}