/*
 * MyLicenseNow — Design tokens
 * -------------------------------------
 * Extraits du template Vizox (css/style.css) sans le modifier.
 * Les tokens « --primary… » de la nomenclature du brief sont des alias
 * des variables d'origine du template : changer la couleur du thème dans
 * style.css se répercute automatiquement partout.
 *
 * Voir docs/design-system-report.md pour l'origine de chaque valeur.
 */
:root {
	/* Couleurs de marque (alias des variables du template) */
	--primary: var(--theme-color1, #1d2f41);        /* bleu marine : titres, header, sidebar */
	--primary-dark: #14212e;                       /* survol / fonds foncés (dérivé : primary -30 %) */
	--primary-light: var(--theme-color3, #4476a8);  /* bleu secondaire : boutons secondaires, liens d'appli */
	--accent: var(--theme-color2, #ff494a);         /* rouge : CTA principal, puces, sous-titres */
	--accent-dark: #b42318;

	/* Surfaces */
	--background: #ffffff;
	--surface: var(--theme-color4, #ecf0f4);        /* fonds de sections claires, cartes secondaires */
	--surface-input: #f4f5f8;                      /* fond des champs (.form-control) */
	--surface-dark: var(--theme-color1, #1d2f41);

	/* Texte */
	--text: var(--headings-color, #1d2f41);
	--text-body: var(--text-color, #73787d);
	--text-muted: #5f646a;          /* #7c858c du template, assombri pour le contraste AA */
	--text-on-dark: #ffffff;
	--text-on-dark-muted: rgba(255, 255, 255, 0.65);

	/* Bordures */
	--border: #d9e0e6;
	--border-light: #ecf0f4;

	/* États (absents du template — choisis pour s'accorder à la palette, voir rapport) */
	--success: #2e9e6a;
	--success-bg: #e6f5ee;
	--warning: #e5a300;      /* dérivé du jaune des étoiles du template (#ffc737), assombri pour le contraste */
	--warning-bg: #fff6dc;
	--danger: #b42318;       /* plus sombre que l'accent pour ne pas confondre erreur et CTA */
	--danger-bg: #fdeaea;
	--info: var(--theme-color3, #4476a8);
	--info-bg: #e8f0f8;

	/* Typographie (template) */
	--font-text: var(--text-font, "Roboto", sans-serif);
	--font-title: var(--title-font, "Roboto", sans-serif);
	--font-style: var(--style-font, "Reey");
	--fs-body: 16px;
	--lh-body: 30px;
	--fs-small: 14px;
	--fs-xs: 12px;
	--fs-h1: 64px;   /* titre de page intérieure (.page-title .title) */
	--fs-h2: 45px;
	--fs-h3: 36px;
	--fs-h4: 24px;
	--fs-h5: 20px;
	--fs-h6: 18px;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--ls-button: 0.1em;  /* boutons et sous-titres en capitales espacées */

	/* Espacements (échelle 4 px, valeurs fréquentes du template) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 30px;
	--space-7: 40px;
	--space-8: 60px;
	--space-9: 90px;
	--section-pad: var(--container-pt, 120px);

	/* Rayons : le template est majoritairement à angles droits */
	--radius-0: 0;
	--radius-sm: 5px;
	--radius-md: 10px;
	--radius-pill: 30px;
	--radius-round: 50%;

	/* Ombres (template) */
	--shadow-sm: 0 10px 60px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 10px 60px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 60px rgba(0, 0, 0, 0.1);

	/* Champs (template .form-control) */
	--input-height: calc(2.25rem + 27px); /* ≈ 63px */
	--input-pad: 14px 30px;

	/* Mouvement */
	--transition: all 300ms ease;
	--transition-slow: all 500ms ease;

	/* Mise en page */
	--container: var(--container-width, 1200px);
	--sidebar-width: 270px;
	--topbar-height: 70px;

	/* Points de rupture (responsive.css) — à utiliser dans les @media en valeur littérale */
	/* 1439px · 1199px · 1023px · 767px · 599px · 424px */
}