/* Merkez Al-Khalil — design tokens, direction B (2026-10-15) : blanc, bleu #024090, gris froids. Source unique des valeurs : ne rien coder en dur ailleurs. */

/* Polices auto-hébergées (OFL). Aucune requête vers un service tiers. */
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/markazi-text-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/markazi-text-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/markazi-text-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/readex-pro-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/readex-pro-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/readex-pro-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Amiri Quran"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/amiri-quran-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

:root {
	/* Couleurs (contrastes mesurés : voir DESIGN.md) */
	--mk-blue: #024090;          /* base unique de tous les bleus */
	--mk-blue-deep: color-mix(in srgb, #024090 78%, #000); /* survol, champs profonds */
	--mk-blue-tint: color-mix(in srgb, #024090 9%, #fff); /* fonds de sélection discrets */
	--mk-cream: #ffffff;         /* fond principal (blanc franc ; ancien crème abandonné) */
	--mk-paper: #f5f7fa;         /* surface de lecture, champs de formulaire */
	--mk-white: #ffffff;
	--mk-ink: #0f1a2e;           /* titres et texte fort */
	--mk-ink-soft: #4b5669;
	--mk-muted: #5d687a;         /* texte secondaire (5,6:1 sur blanc) */
	--mk-line: #e3e8ef;          /* filets décoratifs uniquement */
	--mk-line-strong: #7d889a;   /* bordures de contrôles (3,6:1) */
	--mk-saffron: color-mix(in srgb, #024090 22%, #fff); /* ancien safran : état actif, désormais bleu clair (lisible sur champ bleu) */
	--mk-saffron-deep: #024090;  /* état actif en texte sur clair */
	--mk-error: #a8321f;
	--mk-success: #1f6b45;

	/* Rôles */
	--mk-bg: var(--mk-cream);
	--mk-surface: var(--mk-paper);
	--mk-text: #2a3549;
	--mk-heading: var(--mk-ink);
	--mk-link: var(--mk-blue);
	--mk-active: var(--mk-saffron);
	--mk-focus: 0 0 0 2px var(--mk-paper), 0 0 0 4px var(--mk-blue);
	--mk-focus-on-blue: 0 0 0 2px var(--mk-blue), 0 0 0 4px #ffffff;

	/* Typographie */
	--mk-font-serif: "Markazi Text", "Amiri", Georgia, serif;
	--mk-font-sans: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mk-font-quran: "Amiri Quran", "Markazi Text", serif; /* Amiri Quran, SIL OFL 1.1 (licences/amiriquran-OFL.txt) — KFGQPC écartée : licence non commerciale */
	--mk-size-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
	--mk-size-h1: clamp(2.375rem, 1.6rem + 3vw, 4.25rem);
	--mk-size-h2: clamp(1.875rem, 1.4rem + 1.9vw, 3rem);
	--mk-size-h3: clamp(1.5rem, 1.3rem + .8vw, 2rem);
	--mk-size-read: clamp(1.5rem, 1.35rem + .5vw, 1.8125rem); /* Markazi a un petit œil : lecture 24–29 px */
	--mk-size-ui: 1rem;
	--mk-size-small: .875rem;
	--mk-size-ar: 1.3em;          /* l'arabe en ligne, relatif au texte voisin */
	--mk-size-verse: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	--mk-lh-display: 1;
	--mk-lh-heading: 1.08;
	--mk-lh-read: 1.4;
	--mk-lh-ui: 1.5;
	--mk-lh-ar: 2.1;              /* place pour les harakât */
	--mk-measure: 32em;           /* ≈ 66 caractères en Markazi */
	--mk-track-display: -0.02em;

	/* Espacements (échelle aérée) */
	--mk-space-1: .25rem;
	--mk-space-2: .5rem;
	--mk-space-3: .75rem;
	--mk-space-4: 1rem;
	--mk-space-5: 1.5rem;
	--mk-space-6: 2rem;
	--mk-space-7: 3rem;
	--mk-space-8: 4rem;
	--mk-space-9: 6rem;
	--mk-space-10: 8rem;
	--mk-gutter: clamp(1rem, .6rem + 2vw, 4rem);
	--mk-section: clamp(4.5rem, 3rem + 6vw, 10rem);

	/* Formes */
	--mk-radius: 8px;
	--mk-radius-card: 14px;      /* cartes, panneaux */
	--mk-radius-lg: 22px;        /* grands panneaux */
	--mk-radius-pill: 999px;     /* boutons */
	--mk-stroke: 1.25px;
	--mk-hairline: 1px solid var(--mk-line);
	--mk-shadow-1: 0 1px 2px rgb(32 44 61 / .06), 0 6px 18px -6px rgb(32 44 61 / .14);
	/* Papier posé : une ombre très légère au repos, plus portée au survol (cartes, panneau d'orientation). */
	--mk-shadow-card: 0 1px 2px rgb(32 44 61 / .05), 0 12px 32px -22px rgb(32 44 61 / .28);
	--mk-shadow-lift: 0 2px 4px rgb(32 44 61 / .05), 0 22px 44px -24px color-mix(in srgb, #024090 40%, transparent);
	--mk-shadow-on-blue: 0 1px 2px rgb(0 20 50 / .25), 0 18px 40px -22px rgb(0 20 50 / .6);
	--mk-lift: translateY(-3px);

	/* Mouvement */
	--mk-ease: cubic-bezier(.16, 1, .3, 1);
	--mk-dur-1: 150ms;
	--mk-dur-2: 260ms;
	--mk-dur-3: 720ms;            /* signature : tracé de l'arc */
	--mk-touch: 44px;
}

::selection { background: var(--mk-blue); color: var(--mk-cream); }
html { accent-color: var(--mk-blue); caret-color: var(--mk-blue); }