/**
 * Raviciel Academy — Design tokens
 *
 * Source unique de vérité : couleurs, typographie, espacements, rayons,
 * ombres, durées. Partagée par le front, l'éditeur Gutenberg et l'admin.
 *
 * Direction : « académie d'ingénierie ». Encre profonde, teal Atlas comme
 * couleur d'action, safran en accent unique et rare. Le serif variable
 * (Fraunces) porte la crédibilité académique ; la grotesque (Public Sans)
 * porte la lecture ; le monospace (IBM Plex Mono) porte tout ce qui est
 * identifiant réel — code de session, numéro de certificat, horodatage.
 */

:root {
	/* ---- Couleurs de marque ------------------------------------------ */
	/*
	 * Palette alignée sur le logo Raviciel Academy : le bleu profond du mot
	 * « Academy », le bleu vif de « CIEL » comme couleur d'action, l'orange
	 * de « RAVI » comme accent.
	 */
	--ar-ink: #0f1b33;          /* Encre bleutée — texte principal         */
	--ar-ink-soft: #3b4c6a;     /* Texte secondaire                        */
	--ar-ink-muted: #6b7c99;    /* Légendes, métadonnées                   */

	--ar-primary: #1265c0;      /* Bleu Raviciel — actions, liens          */
	--ar-primary-hover: #0d4c95;
	--ar-primary-soft: #e6effb; /* Fonds d'état, surlignage                */
	--ar-on-primary: #ffffff;   /* Texte posé sur --ar-primary             */

	--ar-navy: #1b2c66;         /* Bleu profond du logotype                */

	/*
	 * Orange repris à l'identique du logo. Attention : sur fond clair, son
	 * contraste ne suffit pas pour du texte courant — il sert aux filets,
	 * aux pastilles et aux éléments graphiques, jamais aux paragraphes.
	 */
	--ar-accent: #f5a63d;       /* Orange Raviciel — accent, utilisé rare  */
	--ar-accent-soft: #fdf2e2;

	/* ---- Surfaces ------------------------------------------------------ */
	/*
	 * `--ar-inverse-*` décrit un bloc volontairement contrasté (bandeau de
	 * titre, pied de page). Ne jamais utiliser `--ar-ink` comme couleur de
	 * fond : c'est le token du texte, il s'inverse en mode sombre et rend
	 * le bloc illisible.
	 */
	--ar-inverse-bg: #0f1b33;
	--ar-inverse-text: #eaf1fb;
	--ar-inverse-muted: #b3c4de;
	--ar-inverse-line: rgba(255, 255, 255, 0.14);

	--ar-surface: #ffffff;
	--ar-surface-2: #f4f7fc;    /* Fond de page, sections alternées        */
	--ar-surface-3: #e8effa;
	--ar-line: #d9e3f0;
	--ar-line-strong: #b5c6de;

	/* ---- États --------------------------------------------------------- */
	--ar-success: #1f7a4d;
	--ar-success-soft: #e4f3ea;
	--ar-warning: #a86a00;
	--ar-warning-soft: #fdf1dd;
	--ar-danger: #b3261e;
	--ar-danger-soft: #fbe9e7;
	--ar-info: #1c5d99;

	/* ---- Typographie ---------------------------------------------------- */
	--ar-font-display: "Fraunces", "IBM Plex Sans Arabic", "Iowan Old Style", Georgia, serif;
	--ar-font-body: "Public Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ar-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Échelle fluide : 320px → 1440px */
	--ar-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--ar-text-sm: clamp(0.8125rem, 0.79rem + 0.2vw, 0.9375rem);
	--ar-text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
	--ar-text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--ar-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	--ar-text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
	--ar-text-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--ar-text-4xl: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);

	--ar-leading-tight: 1.1;
	--ar-leading-snug: 1.28;
	--ar-leading-normal: 1.62;

	--ar-tracking-tight: -0.02em;
	--ar-tracking-wide: 0.08em;

	/* ---- Espacement (échelle 4px) ---------------------------------------- */
	--ar-space-1: 0.25rem;
	--ar-space-2: 0.5rem;
	--ar-space-3: 0.75rem;
	--ar-space-4: 1rem;
	--ar-space-5: 1.5rem;
	--ar-space-6: 2rem;
	--ar-space-7: 3rem;
	--ar-space-8: 4rem;
	--ar-space-9: 6rem;
	--ar-space-10: 8rem;

	/* ---- Structure -------------------------------------------------------- */
	--ar-container: 1180px;
	--ar-container-wide: 1420px;
	--ar-container-text: 68ch;
	--ar-gutter: clamp(1rem, 4vw, 2.5rem);

	/* ---- Rayons et ombres -------------------------------------------------- */
	--ar-radius-sm: 4px;
	--ar-radius: 10px;
	--ar-radius-lg: 18px;
	--ar-radius-pill: 999px;

	--ar-shadow-sm: 0 1px 2px rgba(16, 27, 35, 0.06);
	--ar-shadow: 0 4px 16px -6px rgba(16, 27, 35, 0.14);
	--ar-shadow-lg: 0 24px 48px -24px rgba(16, 27, 35, 0.28);

	/* ---- Mouvement ---------------------------------------------------------- */
	--ar-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ar-duration-fast: 120ms;
	--ar-duration: 220ms;
	--ar-duration-slow: 420ms;

	/* ---- Couches ------------------------------------------------------------ */
	--ar-z-header: 100;
	--ar-z-dropdown: 200;
	--ar-z-drawer: 300;
	--ar-z-modal: 400;
	--ar-z-toast: 500;
}

/* Thème sombre — respecte la préférence système et l'attribut manuel. */
@media (prefers-color-scheme: dark) {
	:root:not([data-ar-theme="light"]) {
		--ar-ink: #eef3fb;
		--ar-ink-soft: #b6c6de;
		--ar-ink-muted: #8b9db8;
		--ar-primary: #5aa9f0;
		--ar-primary-hover: #7dbdf5;
		--ar-primary-soft: #10243f;
	--ar-navy: #7d9ad6;
	--ar-accent: #f8b661;
	--ar-accent-soft: #2b2010;
		--ar-on-primary: #061424;
		--ar-surface: #0b1524;
		--ar-surface-2: #101e33;
		--ar-surface-3: #16283f;
		--ar-line: #23364f;
		--ar-line-strong: #35506f;
		--ar-inverse-bg: #060e1a;
		--ar-inverse-text: #eef4f4;
		--ar-inverse-muted: #9db0cc;
		--ar-inverse-line: rgba(255, 255, 255, 0.1);
		/* Les couleurs d'état ont besoin de leur propre variante :
		   un fond pastel clair sous un texte clair est illisible. */
		--ar-success: #4cc38a;
		--ar-success-soft: #0f2b1e;
		--ar-warning: #e8b339;
		--ar-warning-soft: #2c2211;
		--ar-danger: #f4776b;
		--ar-danger-soft: #301513;
		--ar-info: #6aa8e6;
	}
}

:root[data-ar-theme="dark"] {
	--ar-ink: #eef3fb;
	--ar-ink-soft: #b6c6de;
	--ar-ink-muted: #8b9db8;
	--ar-primary: #5aa9f0;
	--ar-primary-hover: #7dbdf5;
	--ar-primary-soft: #10243f;
	--ar-navy: #7d9ad6;
	--ar-accent: #f8b661;
	--ar-accent-soft: #2b2010;
	--ar-on-primary: #061424;
	--ar-surface: #0b1524;
	--ar-surface-2: #101e33;
	--ar-surface-3: #16283f;
	--ar-line: #23364f;
	--ar-line-strong: #35506f;
	--ar-inverse-bg: #060e1a;
	--ar-inverse-text: #eef4f4;
	--ar-inverse-muted: #9db0cc;
	--ar-inverse-line: rgba(255, 255, 255, 0.1);
	/* Les couleurs d'état ont besoin de leur propre variante :
	   un fond pastel clair sous un texte clair est illisible. */
	--ar-success: #4cc38a;
	--ar-success-soft: #0f2b1e;
	--ar-warning: #e8b339;
	--ar-warning-soft: #2c2211;
	--ar-danger: #f4776b;
	--ar-danger-soft: #301513;
	--ar-info: #6aa8e6;
}

/**
 * Polices auto-hébergées : aucune requête tierce, aucun CLS.
 *
 * Les fichiers ne sont pas versionnés avec le thème — exécuter
 * `bash bin/fetch-fonts.sh` avant la mise en ligne. En leur absence, la pile
 * de repli système s'applique sans erreur (voir assets/fonts/README.md).
 */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+20AC;
}

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/public-sans-variable.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+20AC;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/**
 * Arabe : Fraunces et Public Sans ne couvrent pas cet alphabet. La plage
 * `unicode-range` fait basculer le navigateur caractère par caractère, sans
 * qu'aucun template ait à connaître la langue du contenu.
 */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}