/* ==========================================================================
   ABS MONDIAL EXPORT — Design tokens
   Source unique de vérité (miroir de theme.json pour le CSS sur mesure).
   Modifier ici ET dans theme.json → settings (voir docs/03-charte-design-system.md).
   ========================================================================== */

:root {
	/* --- Couleurs (charte officielle ABS Mondial Export) ---------------- */
	--ame-marine: #0b1f3a;        /* Bleu marine — surfaces primaires, hero, footer */
	--ame-marine-fonce: #061525;  /* Bleu marine foncé — dégradés sombres */
	--ame-marine-moyen: #0b2d4d;  /* Bleu marine moyen — variante foncée */
	--ame-or: #c9a227;            /* Or principal — CTA, accents, états actifs */
	--ame-or-clair: #e2c766;      /* Or clair — détails, sur-titres sur fond sombre */
	--ame-blanc: #ffffff;         /* Blanc — fonds */
	--ame-gris-clair: #f3f4f6;    /* Gris clair — sections alternées */
	--ame-gris-texte: #4b5563;    /* Gris texte — secondaire */
	--ame-bleu-gris: #5f7185;     /* Bleu gris — texte muted sur fond sombre */
	--ame-accent: #145a8d;        /* Bleu accent — liens sur fond clair */

	/* Texte par défaut */
	--ame-texte: var(--ame-marine);
	--ame-texte-muted: var(--ame-gris-texte);

	/* Dérivés autorisés (opacité / color-mix uniquement) */
	--ame-or-hover: color-mix(in srgb, var(--ame-or) 82%, black);
	--ame-or-strong: color-mix(in srgb, var(--ame-or) 60%, var(--ame-marine));
	--ame-or-bg: color-mix(in srgb, var(--ame-or) 12%, transparent);
	--ame-marine-bg: color-mix(in srgb, var(--ame-marine) 6%, transparent);
	--ame-line: color-mix(in srgb, var(--ame-marine) 12%, transparent);
	--ame-line-dark: color-mix(in srgb, #ffffff 16%, transparent);
	--ame-signature: linear-gradient(135deg, #e2c766 0%, #c9a227 100%);
	--ame-marine-grad: linear-gradient(160deg, #061525 0%, #0b2d4d 55%, #0b1f3a 100%);

	/* --- Typographie ----------------------------------------------------- */
	--ame-font-heading: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ame-font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	--ame-fz-display: clamp(2.5rem, 1.6rem + 4vw, 4rem);
	--ame-fz-h2: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
	--ame-fz-h3: 1.5rem;
	--ame-fz-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
	--ame-fz-small: 0.875rem;
	--ame-fz-tiny: 0.8125rem;

	/* --- Formes & ombres ------------------------------------------------ */
	--ame-radius: 12px;
	--ame-radius-sm: 8px;
	--ame-radius-pill: 999px;
	--ame-shadow-1: 0 1px 3px rgba(11, 31, 58, 0.08);
	--ame-shadow-2: 0 12px 32px rgba(11, 31, 58, 0.14);

	/* --- Transitions ------------------------------------------------------ */
	--ame-transition: 0.2s ease;

	/* --- Accessibilité : gestion du fond sombre -------------------------- */
	--ame-on-dark: #ffffff;
	--ame-on-dark-muted: #cfd8e3;
}

/* ---------------------------------------------------------------------------
   ARABE (RTL) — D-100
   Montserrat et Manrope n'ont AUCUN glyphe arabe : sans cette règle, les
   titres arabes s'affichent avec la police système du visiteur (carrés sur
   certains postes). Cairo couvre l'arabe ET le latin, avec les 5 graisses
   utilisées par la charte.

   La police est déclarée dans inc/enqueue.php (ajoutée à l'URL Google Fonts).
   Google la sert par sous-ensembles `unicode-range` : le fichier arabe n'est
   téléchargé QUE si la page contient réellement de l'arabe — aucun surcoût
   sur les 5 autres langues.

   On surcharge ici les 3 familles de variables utilisées sur le site :
     - `--wp--preset--font-family--*` : presets WordPress (theme.json)
     - `--ame-font-*`                    : design system du thème
     - `--amt-font`                     : coquille rendue par le plugin
   Spécificité `html[lang^="ar"]` (0,1,1) > `:root` (0,1,0) : l'ordre de
   chargement des feuilles n'intervient pas.
--------------------------------------------------------------------------- */
html[lang^='ar'] {
	--wp--preset--font-family--body: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--wp--preset--font-family--heading: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--wp--preset--font-family--system: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

	--ame-font-body: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--ame-font-heading: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

	--amt-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

	/* L'arabe est un script cursive : l'interlettrage casse les liaisons
	   entre les lettres, et la capitale n'a pas de sens. */
	letter-spacing: normal;
	text-transform: none;

	/* Les montages/diacritiques débordent : il faut plus d'air vertical. */
	line-height: 1.8;
}

/* Mêmes corrections sur les éléments qui portent leur propre style
   (interlettrage / capitales), qui outrepasseraient l'héritage. */
html[lang^='ar'] .ame-badge,
html[lang^='ar'] .ame-card__num,
html[lang^='ar'] .ame-section__eyebrow,
html[lang^='ar'] .amt-stats-title {
	letter-spacing: normal;
	text-transform: none;
}