/*
 * ACE — tokens (brief §5.2 / §15).
 *
 * PREMIÈRE ligne : l'ordre des couches. Tout le thème est écrit dans les
 * couches ace.* ; les feuilles natives de WooCommerce sont déchargées par
 * inc/assets.php (déclarer @layer wc ne suffirait pas à y ranger du CSS
 * non-couché tiers — voir le commentaire de ce fichier).
 */
@layer wc, ace.base, ace.layout, ace.components, ace.pages, ace.utilities;

:root {
	/* Marque */
	--ace-primary: #f6941e;
	--ace-primary-dark: #e07e0a;
	--ace-primary-soft: #fef7ee;
	--ace-primary-border: #f6d6ac;
	--ace-primary-text: #c77410; /* orange lisible en texte (contraste, brief §10) */
	--ace-navy: #201d5e;
	--ace-navy-dark: #171444;
	--ace-navy-soft: #f3f1fa;
	--ace-navy-border: #dedaf0;

	/* Texte & surfaces */
	--ace-text: #1a1d21;
	--ace-text-muted: #6b7178;
	--ace-text-subtle: #9aa0a6;
	--ace-text-strong: #3a3f45;
	--ace-surface: #ffffff;
	--ace-bg: #f5f6f7;
	--ace-media-bg: #eef0f2;
	--ace-border: #e3e5e8;
	--ace-border-field: #d2d6db;
	--ace-border-strong: #c7cbd1;
	--ace-rule: #eef0f2;
	--ace-rule-soft: #f3f4f6;

	/* Sémantique */
	--ace-success: #2f855a;
	--ace-success-bg: #e7f3ea;
	--ace-success-border: #bfe0c9;
	--ace-success-text: #1e5b3c;
	--ace-warning: #b7791f;
	--ace-warning-bg: #fbf0dc;
	--ace-warning-border: #f0ddb4;
	--ace-warning-text: #8a5d14;
	--ace-info: #3b3f8f;
	--ace-info-bg: #e9eaf3;
	--ace-danger: #c0392b;
	--ace-danger-bg: #f4e7e7;
	--ace-danger-border: #e6c4c4;
	--ace-danger-text: #8e2a22;
	--ace-danger-field: #d14343;

	/* Typographie */
	--ace-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ace-fs-h1: 26px; /* mobile-first : 26 → 32 → 38 */
	--ace-fs-h2: 24px;
	--ace-fs-h3: 18px;
	--ace-fs-body: 15px;
	--ace-fs-sm: 13px;
	--ace-fs-xs: 12px;
	--ace-fs-2xs: 11px;

	/* Espacements — multiples de 4 */
	--ace-1: 4px;
	--ace-2: 8px;
	--ace-3: 12px;
	--ace-4: 16px;
	--ace-5: 20px;
	--ace-6: 24px;
	--ace-8: 32px;
	--ace-12: 48px;
	--ace-16: 64px;
	--ace-gutter: 16px; /* mobile-first : 16 → 20 → 24 */

	/* Formes */
	--ace-radius-sm: 4px;
	--ace-radius: 6px;
	--ace-radius-lg: 8px;
	--ace-shadow-card: 0 1px 4px rgba(26, 29, 33, 0.06);
	--ace-ring-field: 0 0 0 3px rgba(246, 148, 30, 0.18);
	--ace-ring-btn: 0 0 0 3px rgba(246, 148, 30, 0.4);

	/* Conteneurs */
	--ace-w-wide: 1280px;
	--ace-w-checkout: 1160px;
	--ace-w-form: 720px;
	--ace-w-auth: 420px;
	--ace-header-h: 64px;
	--ace-z-header: 100;
	--ace-z-drawer: 200;
	--ace-z-modal: 300;
}

@media (min-width: 768px) {
	:root {
		--ace-fs-h1: 32px;
		--ace-gutter: 20px;
	}
}

@media (min-width: 1025px) {
	:root {
		--ace-fs-h1: 38px;
		--ace-gutter: 24px;
	}
}