/* =========================================================================
   Bayan — jetons de design (couleurs, rayons, ombres, polices)
   Thème clair par défaut ; thème sombre si le téléphone le demande
   (prefers-color-scheme) ou si data-theme="dark" est posé sur <html>.
   Tout le reste du CSS n'utilise QUE ces jetons sémantiques.
   ========================================================================= */

:root {
  /* Fonds et surfaces */
  --bg: #FBF7EE;              /* parchemin */
  --bg-dim: #F3EDDD;
  --surface: #FFFFFF;
  --surface-2: #F2F7F3;
  --border: #E4DCC6;

  /* Texte */
  --text: #24291F;
  --text-dim: #5B6259;
  --title: #0A3D2C;           /* titres en émeraude profond */

  /* Accent (éléments interactifs) */
  --accent: #0B4F3C;          /* émeraude */
  --accent-hover: #0F5C43;
  --on-accent: #FFFFFF;
  --accent-soft: #E7F0EA;
  --on-accent-soft: #0B4F3C;
  --gold: #B8892E;            /* or, pour les petits repères */
  --gold-soft: #F6E9C4;
  --on-gold-soft: #8A6516;

  /* Texte arabe */
  --ar-text: #0A3D2C;

  /* Cartes qui restent sombres dans les deux thèmes (verset du jour, verset clé) */
  --hero-from: #0B4F3C;
  --hero-to: #0A3D2C;
  --on-hero: #FFFFFF;
  --on-hero-dim: rgba(255, 255, 255, 0.82);
  --on-hero-gold: #E8C766;

  /* Barre de navigation, voiles */
  --nav-bg: #FFFFFF;
  --topbar-bg: rgba(251, 247, 238, 0.92);
  --backdrop: rgba(20, 33, 26, 0.45);

  /* États */
  --danger: #B4423B;
  --danger-soft: #FBEAEA;
  --success: #2F7A4D;
  --success-soft: #EAF6EE;
  --warn-soft: #FBF1E4;
  --on-warn-soft: #8A5A16;
  --medine-soft: #F1E7EF;
  --on-medine-soft: #6B3E63;

  /* Formes */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(20, 33, 26, 0.08);
  --shadow-2: 0 8px 24px rgba(20, 33, 26, 0.12);

  /* Polices */
  --font-display: 'Amiri', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-quran: 'Amiri Quran', serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

/* Thème sombre : valeurs inspirées de Kalimat */
:root[data-theme="dark"] {
  --bg: #0B2B26;
  --bg-dim: #0E332D;
  --surface: #123832;
  --surface-2: #1B463F;
  --border: rgba(245, 240, 226, 0.12);
  --text: #F5F0E2;
  --text-dim: #B9CFC8;
  --title: #F5F0E2;
  --accent: #E8CC85;
  --accent-hover: #F0D99E;
  --on-accent: #0B2B26;
  --accent-soft: #1B463F;
  --on-accent-soft: #E8CC85;
  --gold: #E8CC85;
  --gold-soft: #3A3A22;
  --on-gold-soft: #E8CC85;
  --ar-text: #F5E7C0;
  --hero-from: #0E3A33;
  --hero-to: #082420;
  --nav-bg: rgba(11, 43, 38, 0.96);
  --topbar-bg: rgba(11, 43, 38, 0.92);
  --backdrop: rgba(0, 0, 0, 0.55);
  --danger: #E07A72;
  --danger-soft: #3A2220;
  --success: #83A968;
  --success-soft: #1E3A2A;
  --warn-soft: #3A2E1C;
  --on-warn-soft: #E8CC85;
  --medine-soft: #3A2A38;
  --on-medine-soft: #E5C3DC;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B2B26;
    --bg-dim: #0E332D;
    --surface: #123832;
    --surface-2: #1B463F;
    --border: rgba(245, 240, 226, 0.12);
    --text: #F5F0E2;
    --text-dim: #B9CFC8;
    --title: #F5F0E2;
    --accent: #E8CC85;
    --accent-hover: #F0D99E;
    --on-accent: #0B2B26;
    --accent-soft: #1B463F;
    --on-accent-soft: #E8CC85;
    --gold: #E8CC85;
    --gold-soft: #3A3A22;
    --on-gold-soft: #E8CC85;
    --ar-text: #F5E7C0;
    --hero-from: #0E3A33;
    --hero-to: #082420;
    --nav-bg: rgba(11, 43, 38, 0.96);
    --topbar-bg: rgba(11, 43, 38, 0.92);
    --backdrop: rgba(0, 0, 0, 0.55);
    --danger: #E07A72;
    --danger-soft: #3A2220;
    --success: #83A968;
    --success-soft: #1E3A2A;
    --warn-soft: #3A2E1C;
    --on-warn-soft: #E8CC85;
    --medine-soft: #3A2A38;
    --on-medine-soft: #E5C3DC;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}