/* =========================================
   Dark Mode – Midifoot
   Charge automatiquement si l’OS est en sombre (media query)
   ET via override si l’utilisateur force le mode sombre.
   ========================================= */

/* 1) Variables : thème sombre par défaut (auto) */
:root {
    /* tokens globaux */
    --primary-color: #C6A865;       /* Couleur d'accent (rouge rugby) */
    --secondary-color: #333333;     /* Couleur principale du texte */
    --light-color: #151515;         /* Fond blanc */
    --dark-color: #FFFFFF;         /* Fond blanc */
    --background-color: #f9f9f9;    /* Fond général clair */
    --primary-standing-background-color: #181818;
    --secondary-standing-background-color: #222222;
    --less-light-color:#333333;
    --bg-color: #555555;
    --surface-1: #111111;
    --surface-2: #222222;
    --text-color: #ffffff;
    --text-muted: #ffffff;
    --border-color: #333333;
    --link-color: #c9a227;         /* ton doré */
    --link-hover: #e0bd48;
    --card-shadow: 0 2px 10px rgba(0,0,0,.35);

    /* si tu as déjà des variables de marque, réassigne-les ici */
    --primary-color: #c9a227; /* doré */
    --primary-contrast: #000000;
}

/* 2) Quand l’utilisateur FORCE le sombre via le toggle (data-theme=dark) */
html[data-theme="dark"] {
    --bg-color: #222222;
    --surface-1: #444444;
    --surface-2: #151515;
    --text-color: #e6e6e6;
    --text-muted: #b8c0cc;
    --border-color: #151515;
    --link-color: #c9a227;
    --link-hover: #e0bd48;
    --primary-color: #c9a227;
    --primary-contrast: #101317;
}

/* 3) Bases */
body {
    background: var(--bg-color);
    color: var(--text-color);
}

/* Texte & liens */
a { color: var(--link-color); }
a:hover { color: var(--link-hover); }
p, li { color: var(--text-color); }
small, .muted { color: var(--text-muted); }

/* Cartes / blocs */
.card, .post, .widget, .box, .featured, aside section {
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

/* Header / Footer */
header, footer {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
}
header a, footer a { color: var(--text-color); }

/* Boutons */
button, .btn {
    background: var(--primary-color);
    color: var(--primary-contrast);
    border: none;
}
button:hover, .btn:hover {
    filter: brightness(1.05);
}

/* Inputs */
input, select, textarea {
    background: var(--surface-2);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Tables (classements etc.) */
table {
    background: var(--surface-1);
    color: var(--text-color);
}
table th {
    background: var(--surface-2);
    color: var(--text-color);
}
table td, table th {
    border-color: var(--border-color);
}

/* Pastilles/étiquettes si besoin */
.tag, .badge, .chip {
    background: var(--surface-2);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Like button, icônes… (à adapter selon tes classes) */
.like-button { color: var(--text-color); }