/* ==========================================================================
   UpTenUp — Design Tokens
   Source unique de vérité pour couleurs, typographies, espacements, rayons,
   ombres et durées. Importer AVANT tout autre <style> de page.
   ========================================================================== */

:root {
    /* Couleurs neutres — texte / fond */
    --up-ink-900: #1a1a2e;
    --up-ink-800: #2d3142;
    --up-ink-700: #4a4e5c;
    --up-ink-600: #6c7486;
    --up-ink-500: #8b94a8;
    --up-ink-400: #b4bcc9;
    --up-ink-300: #d6dbe4;
    --up-ink-200: #e8ebf1;
    --up-ink-100: #f4f5f9;
    --up-ink-50:  #fafbfd;
    --up-white:   #ffffff;

    /* Couleurs sémantiques (contrastes WCAG AA sur fond clair) */
    --up-success:        #157f3c;
    --up-success-bg:     #e6f5ec;
    --up-warning:        #b06b00;
    --up-warning-bg:     #fff4e0;
    --up-danger:         #c0392b;
    --up-danger-bg:      #fdecea;
    --up-info:           #0d5fb8;
    --up-info-bg:        #e3effd;

    /* Couleurs d'accent (Roland-Garros par défaut) — alignées avec le thème */
    --up-accent:         #C35A1F;
    --up-accent-strong:  #A0522D;
    --up-accent-soft:    #fbe8d9;

    /* Accents fonctionnels supplémentaires (UI tennis) */
    --up-team:           #6f42c1;   /* violet équipe */
    --up-team-strong:    #9b59b6;
    --up-perf:           #FFD700;   /* or — performances / highlights */
    --up-perf-soft:      #fffef0;
    --up-positive:       #90EE90;   /* vert clair sur fond sombre */
    --up-negative:       #FFB6C1;   /* rose clair sur fond sombre */
    --up-orange:         #ff9800;
    --up-orange-strong:  #fd7e14;

    /* Texte « toujours blanc » sur fonds accent / dégradé colorés.
       Ne bascule PAS en mode sombre (les surfaces accent restent
       colorées par design — cf. note plus bas sur les thèmes). */
    --up-on-accent:      #ffffff;

    /* Pastels sémantiques (fonds doux pour commentaires de match) */
    --up-success-soft:   #e8f5e9;
    --up-success-soft-2: #d4edda;
    --up-warning-soft:   #fff9e6;
    --up-warning-soft-2: #fff3cc;
    --up-danger-soft:    #fff0f0;
    --up-danger-soft-2:  #ffe8e8;
    --up-info-soft:      #e8f7fa;
    --up-info-soft-2:    #d4f1f9;

    /* Typographie */
    --up-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, -apple-system, sans-serif;
    --up-font-display: 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
    --up-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --up-fs-xs:  12px;
    --up-fs-sm:  14px;
    --up-fs-md:  16px;
    --up-fs-lg:  18px;
    --up-fs-xl:  22px;
    --up-fs-2xl: 28px;
    --up-fs-3xl: 36px;

    --up-fw-regular: 400;
    --up-fw-medium:  500;
    --up-fw-semibold: 600;
    --up-fw-bold:    700;

    --up-lh-tight: 1.2;
    --up-lh-base:  1.5;
    --up-lh-loose: 1.7;

    /* Espacements (échelle 4px) */
    --up-space-1:  4px;
    --up-space-2:  8px;
    --up-space-3:  12px;
    --up-space-4:  16px;
    --up-space-5:  20px;
    --up-space-6:  24px;
    --up-space-8:  32px;
    --up-space-10: 40px;
    --up-space-12: 48px;
    --up-space-16: 64px;

    /* Rayons */
    --up-radius-sm:   6px;
    --up-radius-md:  10px;
    --up-radius-lg:  16px;
    --up-radius-xl:  20px;
    --up-radius-pill: 999px;

    /* Ombres (légères, cohérentes) */
    --up-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --up-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
    --up-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10);
    --up-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
    --up-shadow-focus: 0 0 0 3px rgba(195, 90, 31, 0.35);

    /* Transitions */
    --up-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --up-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --up-dur-fast:    120ms;
    --up-dur-base:    180ms;
    --up-dur-slow:    280ms;

    /* Tap target minimum (mobile a11y) */
    --up-tap-min:    44px;

    /* Z-index */
    --up-z-base:    1;
    --up-z-sticky:  100;
    --up-z-overlay: 1000;
    --up-z-toast:   2000;

    /* Alias de compatibilité — évite les « variables fantômes » dans monitoring.html.
       Ces noms courts (--bg-card, --bg-main, --text-primary, --text-secondary,
       --border, --accent) n'existent pas en dehors de ce fichier : on les résout
       ici vers les vrais tokens du design system afin que toutes les valeurs de
       repli `var(--bg-card, var(--up-ink-900))` donnent le bon résultat.
       Les overrides dark-mode ci-dessous gèrent automatiquement les deux thèmes. */
    --bg-card:        var(--up-white);
    --bg-main:        var(--up-ink-50);
    --text-primary:   var(--up-ink-800);
    --text-secondary: var(--up-ink-600);
    --border:         var(--up-ink-200);
    --accent:         var(--up-accent);
}

/* Variantes thématiques — les couleurs d'accent s'alignent sur le thème
   Grand Slam choisi par l'utilisateur. Les variables --court-bg-* déjà
   définies dans index.html restent intactes ; on ne touche qu'à --up-accent*. */
body.theme-roland-garros {
    --up-accent:        #C35A1F;
    --up-accent-strong: #A0522D;
    --up-accent-soft:   #fbe8d9;
    --up-shadow-focus:  0 0 0 3px rgba(195, 90, 31, 0.35);
}
body.theme-wimbledon {
    --up-accent:        #2E7D32;
    --up-accent-strong: #1B5E20;
    --up-accent-soft:   #e0f0e2;
    --up-shadow-focus:  0 0 0 3px rgba(46, 125, 50, 0.35);
}
body.theme-us-open {
    --up-accent:        #1565C0;
    --up-accent-strong: #0D47A1;
    --up-accent-soft:   #e1ecf9;
    --up-shadow-focus:  0 0 0 3px rgba(21, 101, 192, 0.35);
}
body.theme-australian-open {
    --up-accent:        #00838F;
    --up-accent-strong: #006064;
    --up-accent-soft:   #d9f1f3;
    --up-shadow-focus:  0 0 0 3px rgba(0, 131, 143, 0.35);
}

/* ---------- Mode sombre ----------
   Activable via `data-theme="dark"` sur <html> ou <body>, et automatique
   via prefers-color-scheme. Seuls les tokens neutres et surfaces
   basculent — les couleurs d'accent Grand Slam restent identiques. */
:root[data-theme="dark"],
body[data-theme="dark"] {
    --up-ink-900: #f4f5f9;
    --up-ink-800: #e4e7ee;
    --up-ink-700: #c1c7d4;
    --up-ink-600: #97a0b1;
    --up-ink-500: #6f7790;
    --up-ink-400: #545b73;
    --up-ink-300: #3b4258;
    --up-ink-200: #2a3046;
    --up-ink-100: #1f2438;
    --up-ink-50:  #161a2c;
    --up-white:   #11142a;

    --up-success-bg: #143324;
    --up-warning-bg: #3b2a0d;
    --up-danger-bg:  #3b1716;
    --up-info-bg:    #102a47;

    --up-success-soft:   #143324;
    --up-success-soft-2: #1d4a32;
    --up-warning-soft:   #3b2a0d;
    --up-warning-soft-2: #4a3713;
    --up-danger-soft:    #3b1716;
    --up-danger-soft-2:  #4d1d1c;
    --up-info-soft:      #102a47;
    --up-info-soft-2:    #163963;
    --up-perf-soft:      #2a2410;

    --up-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --up-shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
    --up-shadow-md: 0 6px 16px rgba(0,0,0,0.5);
    --up-shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]),
    body:not([data-theme="light"]):not([data-theme="dark"]) {
        --up-ink-900: #f4f5f9;
        --up-ink-800: #e4e7ee;
        --up-ink-700: #c1c7d4;
        --up-ink-600: #97a0b1;
        --up-ink-500: #6f7790;
        --up-ink-400: #545b73;
        --up-ink-300: #3b4258;
        --up-ink-200: #2a3046;
        --up-ink-100: #1f2438;
        --up-ink-50:  #161a2c;
        --up-white:   #11142a;

        --up-success-bg: #143324;
        --up-warning-bg: #3b2a0d;
        --up-danger-bg:  #3b1716;
        --up-info-bg:    #102a47;

        --up-success-soft:   #143324;
        --up-success-soft-2: #1d4a32;
        --up-warning-soft:   #3b2a0d;
        --up-warning-soft-2: #4a3713;
        --up-danger-soft:    #3b1716;
        --up-danger-soft-2:  #4d1d1c;
        --up-info-soft:      #102a47;
        --up-info-soft-2:    #163963;
        --up-perf-soft:      #2a2410;
    }
}

/* ---------- Surcouche pratique pour le mode sombre ----------
   Les pages internes (templates Jinja) utilisent encore beaucoup de couleurs
   « en dur » (`background: white`, `color: #333`, etc.) dans leurs <style>
   inline. Pour garantir une lisibilité homogène en mode sombre sans réécrire
   chaque page, on applique ici quelques surcharges ciblées. La spécificité
   `body[data-theme="dark"] X` (0,1,1) est strictement supérieure à `body X`
   (0,0,1) — pas besoin d'`!important` sauf pour les fonds linéaires. */

body[data-theme="dark"] {
    background: linear-gradient(135deg, #0c1024 0%, #161a2c 50%, #1f2438 100%) !important;
    color: var(--up-ink-900);
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .up-card,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .section-box,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .player-card,
body[data-theme="dark"] .opponent-card,
body[data-theme="dark"] .equipe-card,
body[data-theme="dark"] .burger-dropdown,
body[data-theme="dark"] .help-content {
    background: var(--up-ink-100);
    color: var(--up-ink-900);
    border-color: var(--up-ink-300);
}
/* La variante .up-card--summary garde son dégradé vert intentionnel
   même en mode sombre (carte « hero »). */
body[data-theme="dark"] .up-card.up-card--summary {
    background: linear-gradient(135deg, #1a5f2a, #2d8f4e);
    color: var(--up-white);
}
body[data-theme="dark"] .card h2,
body[data-theme="dark"] .card h3,
body[data-theme="dark"] .up-card h2,
body[data-theme="dark"] .up-card h3,
body[data-theme="dark"] .card label,
body[data-theme="dark"] .form-group label,
body[data-theme="dark"] .info-row .label,
body[data-theme="dark"] .info-row .value {
    color: var(--up-ink-900);
}
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    background: var(--up-ink-50);
    color: var(--up-ink-900);
    border-color: var(--up-ink-300);
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: var(--up-ink-500);
}
body[data-theme="dark"] .header,
body[data-theme="dark"] .top-bar {
    background: rgba(0, 0, 0, 0.35);
}
body[data-theme="dark"] .tab-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--up-ink-900);
}
body[data-theme="dark"] .tab-btn.active {
    background: var(--up-ink-100);
    color: var(--up-accent);
}
body[data-theme="dark"] a:not(.btn):not(.tab-btn):not(.logout) {
    color: var(--up-ink-700);
}

/* Mode auto : si l'utilisateur n'a rien forcé, on suit le système. */
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]):not([data-theme="dark"]) {
        background: linear-gradient(135deg, #0c1024 0%, #161a2c 50%, #1f2438 100%) !important;
        color: var(--up-ink-900);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) .card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .up-card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .modal-content,
    body:not([data-theme="light"]):not([data-theme="dark"]) .section-box,
    body:not([data-theme="light"]):not([data-theme="dark"]) .stat-card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .player-card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .opponent-card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .equipe-card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .burger-dropdown,
    body:not([data-theme="light"]):not([data-theme="dark"]) .help-content {
        background: var(--up-ink-100);
        color: var(--up-ink-900);
        border-color: var(--up-ink-300);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) .up-card.up-card--summary {
        background: linear-gradient(135deg, #1a5f2a, #2d8f4e);
        color: var(--up-white);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) input[type="text"],
    body:not([data-theme="light"]):not([data-theme="dark"]) input[type="email"],
    body:not([data-theme="light"]):not([data-theme="dark"]) input[type="password"],
    body:not([data-theme="light"]):not([data-theme="dark"]) input[type="search"],
    body:not([data-theme="light"]):not([data-theme="dark"]) input[type="number"],
    body:not([data-theme="light"]):not([data-theme="dark"]) textarea,
    body:not([data-theme="light"]):not([data-theme="dark"]) select {
        background: var(--up-ink-50);
        color: var(--up-ink-900);
        border-color: var(--up-ink-300);
    }
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
    :root {
        --up-dur-fast: 0ms;
        --up-dur-base: 0ms;
        --up-dur-slow: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}