/* ==========================================================================
   HalalPlaces.ca — THÈME (jetons de design)
   --------------------------------------------------------------------------
   ► C'est LE fichier à modifier pour changer l'habillage du site :
     couleurs, polices, arrondis, ombres, espacements.
   ► Tous les composants (app.css, admin.css) utilisent ces variables.
   ► Voir docs/DESIGN-GUIDE.md pour les règles (RTL arabe, contrastes…).
   ========================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --c-primary: #0b6e4f;          /* vert émeraude principal */
  --c-primary-600: #095c42;
  --c-primary-700: #074a35;
  --c-primary-900: #04291e;      /* fonds sombres (héros, pied de page) */
  --c-primary-50: #e8f4ee;
  --c-primary-100: #cfe8dc;

  --c-accent: #d4a12a;           /* or */
  --c-accent-600: #b8871a;
  --c-accent-50: #fbf3df;

  /* --- Neutres --- */
  --c-ink: #10231c;              /* texte principal */
  --c-ink-2: #3c4f47;            /* texte secondaire */
  --c-muted: #6b7c75;            /* texte discret */
  --c-line: #e4e8e3;             /* bordures */
  --c-line-2: #eef1ec;
  --c-bg: #faf8f3;               /* fond de page (crème chaud) */
  --c-bg-2: #f3f1ea;             /* fond de section alternée */
  --c-surface: #ffffff;          /* cartes */

  /* --- États --- */
  --c-success: #1f8a4c;
  --c-success-50: #e6f5ec;
  --c-danger: #c92a2a;
  --c-danger-50: #fdecec;
  --c-warning: #b7791f;
  --c-warning-50: #fdf3e1;
  --c-info: #1c6fb8;
  --c-info-50: #e7f1fb;
  --c-star: #f5a623;
  --c-user-dot: #2f80ed;         /* point « vous êtes ici » */

  /* --- Typographie --- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --fs-3xl: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem);

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

  /* --- Formes --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-xs: 0 1px 2px rgba(16, 35, 28, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 35, 28, 0.06), 0 1px 2px rgba(16, 35, 28, 0.04);
  --shadow: 0 10px 30px -12px rgba(16, 35, 28, 0.18), 0 2px 6px rgba(16, 35, 28, 0.05);
  --shadow-lg: 0 30px 60px -20px rgba(4, 41, 30, 0.35), 0 8px 20px -8px rgba(4, 41, 30, 0.15);
  --ring: 0 0 0 4px rgba(11, 110, 79, 0.18);

  /* --- Mise en page --- */
  --container: 1240px;
  --gutter: 16px;
  --header-h: 68px;
  --tabbar-h: 64px;

  /* --- Effets --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t: 0.25s var(--ease);

  /* --- Motif géométrique (fond des zones sombres) --- */
  --pattern: url("../img/pattern.svg");
  --hero-gradient: radial-gradient(1200px 500px at 85% -10%, rgba(212, 161, 42, 0.22), transparent 60%),
                   radial-gradient(900px 500px at -10% 110%, rgba(47, 158, 110, 0.35), transparent 60%),
                   linear-gradient(160deg, #06372a 0%, #0a5a41 55%, #0b6e4f 100%);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 76px; }
}