/* Pray App — Thème global avec support du mode sombre
   Inclus dans chaque page via includes/favicon-meta.html
   Les templates utilisent var(--nom) ; les styles inline seront migrés progressivement. */

:root {
    /* Couleurs de fond */
    --bg:          #f4f6f8;
    --card:        #ffffff;
    --card-alt:    #f8f9fa;

    /* Texte */
    --text:        #1e2d3d;
    --text-muted:  #6b7a8d;
    --muted:       #6b7a8d;

    /* Bordures */
    --border:      #e8ecf0;
    --border-dark: #dee2e6;

    /* Couleurs sémantiques */
    --accent:      #007bff;
    --accent-soft: #e8f1ff;
    --green:       #28a745;
    --green-soft:  #d4edda;
    --orange:      #f59e0b;
    --orange-soft: #fff3cd;
    --red:         #dc3545;
    --red-soft:    #f8d7da;
    --purple:      #6f42c1;
    --purple-soft: #f0ebff;

    /* Couleurs liturgiques (fixes, ne changent pas en mode sombre) */
    --liturgy-vert:   #28a745;
    --liturgy-violet: #6f42c1;
    --liturgy-blanc:  #6c757d;
    --liturgy-rouge:  #dc3545;
    --liturgy-or:     #ffc107;
    --liturgy-rose:   #e83e8c;
    --liturgy-noir:   #343a40;

    /* Typographie */
    --font-sans:   sans-serif;
    --radius:      8px;
    --radius-lg:   14px;
    --shadow:      0 2px 10px rgba(0, 0, 0, .08);
    --shadow-lg:   0 4px 16px rgba(0, 0, 0, .12);
}

/* Mode sombre DÉSACTIVÉ — voir ci-dessous.
   La quasi-totalité des écrans (home-styles.html, bible-text-view, prayer-view,
   office-view, etc.) codent encore leurs couleurs en dur (fonds #fff, textes
   #333…). Tant que cette migration vers les variables n'est pas terminée, activer
   le mode sombre rend le texte clair (var(--text)) illisible sur ces fonds blancs
   restés en dur (« blanc sur blanc »). On garde donc le thème clair sur tous les
   appareils. Pour réactiver le mode sombre : restaurer le bloc
   @media (prefers-color-scheme: dark) ci-dessous APRÈS avoir migré les styles inline.

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #0f1117;
        --card:        #1e2530;
        --card-alt:    #252d3a;

        --text:        #e8ecf0;
        --text-muted:  #9aa5b4;
        --muted:       #9aa5b4;

        --border:      #2d3748;
        --border-dark: #3d4a5c;

        --accent:      #4da3ff;
        --accent-soft: #1a2e45;
        --green:       #48c774;
        --green-soft:  #1a3028;
        --orange:      #ffb347;
        --orange-soft: #3a2e10;
        --red:         #ff6b6b;
        --red-soft:    #3a1a1a;
        --purple:      #b48ef0;
        --purple-soft: #2a1e40;

        --shadow:      0 2px 10px rgba(0, 0, 0, .30);
        --shadow-lg:   0 4px 16px rgba(0, 0, 0, .40);
    }
}
*/

/* Classes utilitaires qui utilisent les variables
   (migration progressive depuis les styles inline) */

body {
    background-color: var(--bg);
    color: var(--text);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.text-muted { color: var(--text-muted) !important; }

.badge-info {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius);
    padding: 2px 8px;
    font-size: 12px;
}

/* Adaptation des composants communs */
table {
    color: var(--text);
}

th {
    background: var(--card-alt);
    color: var(--text);
    border-color: var(--border) !important;
}

td {
    border-color: var(--border) !important;
}

input, select, textarea {
    background: var(--card);
    color: var(--text);
    border-color: var(--border);
}

/* Boutons Bootstrap-like réutilisables */
.btn {
    border-radius: var(--radius);
    transition: all .15s ease;
}

/* Alertes utilisant les variables */
.alert-success { background: var(--green-soft);  color: var(--green);  border-color: var(--green); }
.alert-warning { background: var(--orange-soft); color: var(--orange); border-color: var(--orange); }
.alert-danger  { background: var(--red-soft);    color: var(--red);    border-color: var(--red); }
.alert-info    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Navigation (appliquée via nav.html qui inclut déjà theme.css) */
.nav-dark-mode {
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

/* Touch UX — suppress tap flash, faster response */
button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* iOS momentum scrolling for scrollable containers */
.section, .card, [class*="-section"] {
    -webkit-overflow-scrolling: touch;
}