/* ==========================================================================
   Brand-Guidelines.md - Médiathèque Design Tokens & Core Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* 0. Couleurs Fondamentales */
  --primary-blue: #1E66FF;
  --primary-blue-hover: #1353db;
  --primary-blue-active: #0c43b8;
  --primary-blue-light: #EBF2FF;
  --primary-blue-glow: rgba(30, 102, 255, 0.25);
  --primary-blue-glow-subtle: rgba(30, 102, 255, 0.08);
  --primary-blue-gradient: linear-gradient(135deg, #1E66FF 0%, #1353db 100%);
  --shadow-btn: 0px 8px 20px rgba(30, 102, 255, 0.35);

  /* Thème Neutre & Typographie */
  --dark-navy: #0E2246;
  --dark-card: #0A192F;
  --dark-surface: #101d36;
  --text-primary: #0E2246;
  --text-secondary: #5A6E85;
  --text-muted: #8695A8;
  --text-white: #FFFFFF;

  /* Arrière-plan & Cartes (Brand-guidelines 4.1 & 4.2) */
  --bg-gradient: linear-gradient(135deg, #F0F4FA 0%, #E8EFFD 100%);
  --card-bg: #FFFFFF;
  --card-border: #E2E8F0;
  --input-bg: #F4F7FB;
  --input-border: #E2E8F0;
  --input-focus-border: #1E66FF;

  /* Accents Visuels & Statuts */
  --accent-orange: #FF7A00;
  --accent-orange-hover: #e66e00;
  --accent-orange-gradient: linear-gradient(135deg, #FF8A00 0%, #E56700 100%);
  --accent-green: #10B981;
  --accent-green-light: #ECFDF5;
  --accent-green-border: #A7F3D0;
  --accent-red: #EF4444;
  --accent-red-light: #FEE2E2;

  /* Alerte Style Brand (fond jaune ambré doux) */
  --alert-amber-bg: #FFFBEB;
  --alert-amber-border: #FDE68A;
  --alert-amber-text: #92400E;

  /* Rayons de Courbure (Border Radius) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-modal: 30px;
  /* 28px à 32px selon Brand-guidelines */
  --radius-pill: 9999px;

  /* Ombres Portées (Box Shadows) */
  --shadow-subtle: 0px 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0px 20px 50px rgba(14, 34, 70, 0.06);
  --shadow-card-elevated: 0px 25px 60px rgba(14, 34, 70, 0.12);
  --shadow-btn: 0px 8px 20px rgba(30, 102, 255, 0.35);
  --shadow-btn-orange: 0px 8px 20px rgba(255, 122, 0, 0.35);
  --shadow-float: 0px 12px 36px rgba(14, 34, 70, 0.14);

  /* Typographie */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Thèmes d'accent personnalisables (Couleur Interface sélectionnable) */
[data-theme="blue"] {
  --primary-blue: #1E66FF;
  --primary-blue-hover: #1353db;
  --primary-blue-active: #0c43b8;
  --primary-blue-light: #EBF2FF;
  --primary-blue-glow: rgba(30, 102, 255, 0.25);
  --primary-blue-glow-subtle: rgba(30, 102, 255, 0.08);
  --primary-blue-gradient: linear-gradient(135deg, #1E66FF 0%, #1353db 100%);
  --shadow-btn: 0px 8px 20px rgba(30, 102, 255, 0.35);
}

[data-theme="emerald"] {
  --primary-blue: #059669;
  --primary-blue-hover: #047857;
  --primary-blue-active: #065f46;
  --primary-blue-light: #ECFDF5;
  --primary-blue-glow: rgba(5, 150, 105, 0.25);
  --primary-blue-glow-subtle: rgba(5, 150, 105, 0.08);
  --primary-blue-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
  --shadow-btn: 0px 8px 20px rgba(5, 150, 105, 0.35);
}

[data-theme="violet"] {
  --primary-blue: #7C3AED;
  --primary-blue-hover: #6D28D9;
  --primary-blue-active: #5B21B6;
  --primary-blue-light: #F5F3FF;
  --primary-blue-glow: rgba(124, 58, 237, 0.25);
  --primary-blue-glow-subtle: rgba(124, 58, 237, 0.08);
  --primary-blue-gradient: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  --shadow-btn: 0px 8px 20px rgba(124, 58, 237, 0.35);
}

[data-theme="amber"] {
  --primary-blue: #D97706;
  --primary-blue-hover: #B45309;
  --primary-blue-active: #92400E;
  --primary-blue-light: #FFFBEB;
  --primary-blue-glow: rgba(217, 119, 6, 0.25);
  --primary-blue-glow-subtle: rgba(217, 119, 6, 0.08);
  --primary-blue-gradient: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  --shadow-btn: 0px 8px 20px rgba(217, 119, 6, 0.35);
}

/* Reset Global & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-gradient);
  color: var(--text-primary);
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Ambient Blue Glows in Background (Brand-guidelines 4.1) */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(120px);
}

body::before {
  top: -100px;
  left: -50px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--primary-blue-glow) 0%, transparent 70%);
  opacity: 0.7;
}

body::after {
  bottom: -100px;
  right: -50px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  opacity: 0.6;
}

/* Boutons & Liens universels */
button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  transition: all var(--transition-normal);
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Prise en charge linguistique et typographie Arabe (RTL)
   ========================================================================== */
body.lang-arabic,
html[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
  direction: rtl;
  text-align: right;
}

body.lang-arabic h1,
body.lang-arabic h2,
body.lang-arabic h3,
body.lang-arabic h4 {
  font-family: 'Noto Sans Arabic', 'Outfit', sans-serif;
}

.reader-formatted-content.arabic-text,
.reader-formatted-content[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Sans Arabic', 'Amiri', serif;
  line-height: 2.1;
  font-size: 1.12rem;
}

.reader-formatted-content.arabic-text .reader-chapter-heading,
.reader-formatted-content.arabic-text h1,
.reader-formatted-content.arabic-text h2,
.reader-formatted-content.arabic-text h3 {
  font-family: 'Noto Sans Arabic', sans-serif;
  font-weight: 700;
  text-align: right;
}

.reader-formatted-content.arabic-text .reader-para {
  text-align: justify;
  text-align-last: right;
  margin-bottom: 22px;
}

.reader-toc-drawer[dir="rtl"] {
  direction: rtl;
  text-align: right;
}