/* ══════════════════════════════════════════════════════════════════════
   MAKTOUB MAGHREB — DESIGN SYSTEM (jetons)          css/mk-design-system.css
   Source UNIQUE des couleurs, polices, tailles, espacements, rayons,
   ombres, conteneurs et durées. Chargé par header.php APRÈS les feuilles
   historiques : les anciennes variables (--emerald*, --gold*, --bg-*,
   --text-*, --border, --radius…) sont redéfinies comme ALIAS de ces
   jetons → toutes les pages existantes suivent la charte sans réécriture.
   Règle : toute nouvelle UI utilise var(--mk-…), jamais une couleur en dur.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Charte ── */
  --mk-primary:#783447;        /* bordeaux principal */
  --mk-primary-dark:#542332;   /* bordeaux foncé */
  --mk-primary-hover:#663040;
  --mk-primary-pale:#F5EAED;   /* fonds de sélection / survol */
  --mk-primary-ink:#783447;    /* texte d'accent sur fond clair */
  --mk-on-primary:#FFFFFF;
  --mk-gold:#B99A62;           /* doré discret */
  --mk-gold-light:#D2BC8E;
  --mk-gold-pale:#F4EEE3;
  --mk-gold-ink:#7A6232;       /* texte doré lisible sur clair */
  --mk-ivory:#FAF7F2;
  --mk-white:#FFFFFF;
  --mk-surface:#FFFFFF;        /* cartes, panneaux */
  --mk-surface-2:#F4EFE8;      /* fonds secondaires, champs */
  --mk-text:#29252A;
  --mk-text-2:#5B555E;         /* texte courant secondaire */
  --mk-text-muted:#77717A;     /* texte secondaire (charte) */
  --mk-border:#E9E1E3;
  --mk-border-strong:#D8CCCF;
  --mk-success:#287A52; --mk-success-pale:#E7F2EC;
  --mk-warning:#A86D19; --mk-warning-pale:#F8EFE1;
  --mk-error:#B83D4B;   --mk-error-pale:#F9E9EB;
  --mk-info:#3B5B86;    --mk-info-pale:#EAF0F7;
  --mk-focus:0 0 0 3px rgba(120,52,71,.22);
  --mk-overlay:rgba(30,18,24,.55);

  /* ── Typographie ── */
  --mk-font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mk-font-body:'Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mk-fs-xs:.75rem; --mk-fs-sm:.875rem; --mk-fs-base:1rem; --mk-fs-md:1.0625rem;
  --mk-fs-lg:1.25rem; --mk-fs-xl:1.5rem; --mk-fs-2xl:clamp(1.6rem,3.2vw,2rem); --mk-fs-3xl:clamp(1.9rem,4.5vw,2.75rem);
  --mk-lh:1.55; --mk-lh-tight:1.15;
  --mk-fw-normal:400; --mk-fw-medium:500; --mk-fw-bold:700;

  /* ── Espacements (échelle 4 px) ── */
  --mk-s1:.25rem; --mk-s2:.5rem; --mk-s3:.75rem; --mk-s4:1rem; --mk-s5:1.25rem; --mk-s6:1.5rem; --mk-s8:2rem; --mk-s10:2.5rem; --mk-s12:3rem;

  /* ── Rayons, ombres, conteneurs, mouvement ── */
  --mk-r-sm:8px; --mk-r-md:12px; --mk-r-lg:16px; --mk-r-pill:999px;
  --mk-shadow-sm:0 1px 2px rgba(41,37,42,.06);
  --mk-shadow-md:0 1px 2px rgba(41,37,42,.05),0 6px 18px -8px rgba(84,35,50,.18);
  --mk-shadow-lg:0 18px 40px -16px rgba(84,35,50,.30);
  --mk-w-narrow:640px; --mk-w:1120px; --mk-w-wide:1280px; --mk-gutter:1rem;
  --mk-tap:44px;               /* cible tactile minimale */
  --mk-dur:.18s; --mk-ease:cubic-bezier(.2,.7,.2,1);
  --mk-z-nav:200; --mk-z-modal:1600; --mk-z-toast:1700;
  --mk-zellige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23B99A62' stroke-width='1.1'%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3Crect x='14' y='14' width='20' height='20' transform='rotate(45 24 24)'/%3E%3Ccircle cx='24' cy='24' r='4'/%3E%3C/g%3E%3C/svg%3E");
  --mk-zellige-faint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23B99A62' stroke-opacity='.2' stroke-width='1.1'%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3Crect x='14' y='14' width='20' height='20' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E");

  /* ── ALIAS des anciennes variables (ne pas utiliser dans le nouveau code) ── */
  --emerald:var(--mk-primary); --emerald-light:#94495E; --emerald-dark:var(--mk-primary-dark); --emerald-pale:var(--mk-primary-pale);
  --gold:var(--mk-gold); --gold-light:var(--mk-gold-light); --gold-pale:var(--mk-gold-pale);
  --bg-page:var(--mk-ivory); --bg-card:var(--mk-surface); --bg-secondary:var(--mk-surface-2); --bg-nav:rgba(255,255,255,.96);
  --text-1:var(--mk-text); --text-2:var(--mk-text-2); --text-3:var(--mk-text-muted);
  --border:var(--mk-border); --border-focus:var(--mk-primary);
  --shadow:var(--mk-shadow-md); --shadow-card:var(--mk-shadow-md);
  --radius:var(--mk-r-lg); --radius-sm:var(--mk-r-sm); --transition:var(--mk-dur) ease;
}

/* ── Mode sombre (même charte, tons chauds, contrastes vérifiés) ── */
[data-theme="dark"]{
  --mk-primary:#A9475F; --mk-primary-dark:#7E3446; --mk-primary-hover:#B85A71; --mk-primary-pale:#3A2128; --mk-primary-ink:#E8A6B6;
  --mk-gold:#CDB27C; --mk-gold-light:#DCC79C; --mk-gold-pale:#2E2618; --mk-gold-ink:#DCC79C;
  --mk-ivory:#161214; --mk-surface:#211B1E; --mk-surface-2:#1B1619;
  --mk-text:#F2EDEF; --mk-text-2:#CFC6CB; --mk-text-muted:#A39AA0;
  --mk-border:#3A3035; --mk-border-strong:#4A3E44;
  --mk-success:#5FBF8D; --mk-success-pale:#17291F; --mk-warning:#E0A54A; --mk-warning-pale:#2C2213;
  --mk-error:#E7798A; --mk-error-pale:#311A1E; --mk-info:#8FB0DA; --mk-info-pale:#1A2230;
  --mk-focus:0 0 0 3px rgba(232,166,182,.3); --mk-overlay:rgba(0,0,0,.65);
  --mk-shadow-md:0 8px 24px -12px rgba(0,0,0,.6); --mk-shadow-lg:0 18px 40px -16px rgba(0,0,0,.7);
  --bg-nav:rgba(22,18,20,.97);
  --emerald-light:#C46A80;
}

/* ── Base ── */
html{-webkit-text-size-adjust:100%}
body{background-color:var(--mk-ivory);color:var(--mk-text);font-family:var(--mk-font-body);line-height:var(--mk-lh)}
::selection{background:rgba(120,52,71,.18)}
[data-theme="dark"] ::selection{background:rgba(232,166,182,.3)}
:focus-visible{outline:2px solid var(--mk-primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}