/**
 * Tokens du design système Plato — référence unique côté code (§10).
 *
 * Source : projet Claude Design « Plato Design System »
 * (31781711-b007-4e73-b9b7-1e593a1cb741), fichiers tokens/colors.css,
 * typography.css, spacing.css et effects.css, relevés le 15/09/2026.
 *
 * Toute évolution du design système passe par ce fichier, jamais par des
 * valeurs en dur dans les feuilles de style.
 *
 * Préfixe --plato- : les noms d'origine (--color-bg, --space-4…) sont trop
 * génériques et entreraient en collision avec Divi ou d'autres plugins.
 */

:root {
	/* ---- Neutres ---- */
	--plato-color-ink: #2A2536;
	--plato-color-muted: #4E495C;
	--plato-color-faint: #8A8496;
	--plato-color-subtle: #B4AEB9;
	--plato-color-bg: #FBF7F1;
	--plato-color-surface: #FFFFFF;
	--plato-color-border: #EFE9E1;
	--plato-color-border-strong: #E4DED6;
	--plato-color-border-input: #D8D3DD;
	--plato-color-divider: #F1ECE4;
	--plato-color-chip: #F3EEE6;

	/* ---- Framboise — signature / primaire ---- */
	--plato-framboise-50: #FDF0F6;
	--plato-framboise-100: #F9C6DD;
	--plato-framboise-200: #F49CC4;
	--plato-framboise-300: #EF6BA4;
	--plato-framboise-400: #EA4B8F;
	--plato-framboise-500: #E6317F;
	--plato-framboise-600: #C31F68;
	--plato-framboise-700: #9E1854;
	--plato-framboise-800: #7A1240;
	--plato-framboise-900: #560C2D;

	/* ---- Lagon — accent (succès, actif) ---- */
	--plato-lagon-50: #EAF7F7;
	--plato-lagon-100: #BEE7E8;
	--plato-lagon-200: #8FD6D8;
	--plato-lagon-300: #55C1C4;
	--plato-lagon-400: #2FAFB3;
	--plato-lagon-500: #17A3A8;
	--plato-lagon-600: #12868A;
	--plato-lagon-700: #0E6A6D;
	--plato-lagon-800: #0A4E50;
	--plato-lagon-900: #063234;

	/* ---- Soleil — accent (chaleur, avertissement) ---- */
	--plato-soleil-50: #FEF6E7;
	--plato-soleil-100: #FCE2B8;
	--plato-soleil-200: #FACF89;
	--plato-soleil-300: #F8BB59;
	--plato-soleil-400: #F6AE3C;
	--plato-soleil-500: #F5A524;
	--plato-soleil-600: #D98A12;
	--plato-soleil-700: #B06E0E;
	--plato-soleil-800: #86530A;
	--plato-soleil-900: #5C3906;

	/* ---- Brume — accent rare ---- */
	--plato-brume-50: #F5F1FB;
	--plato-brume-100: #E4D8F5;
	--plato-brume-200: #D0BEEC;
	--plato-brume-300: #BCA3E3;
	--plato-brume-400: #B197DF;
	--plato-brume-500: #A78BDB;
	--plato-brume-600: #8A6AC8;
	--plato-brume-700: #6E51A3;
	--plato-brume-800: #523C7A;
	--plato-brume-900: #372851;

	/* ---- Gris chauds ---- */
	--plato-neutral-0: #FFFFFF;
	--plato-neutral-50: #FBF7F1;
	--plato-neutral-100: #F3EEE6;
	--plato-neutral-200: #E4DED6;
	--plato-neutral-300: #D8D3DD;
	--plato-neutral-400: #B4AEB9;
	--plato-neutral-500: #8A8496;
	--plato-neutral-600: #625C6E;
	--plato-neutral-700: #4E495C;
	--plato-neutral-900: #2A2536;

	/* ---- Alias sémantiques ---- */
	--plato-text-primary: var(--plato-color-ink);
	--plato-text-secondary: var(--plato-color-muted);
	--plato-text-tertiary: var(--plato-color-faint);
	--plato-text-placeholder: var(--plato-color-subtle);
	--plato-surface-page: var(--plato-color-bg);
	--plato-surface-card: var(--plato-color-surface);
	--plato-border-default: var(--plato-color-border);
	--plato-border-input: var(--plato-color-border-input);
	--plato-accent-primary: var(--plato-framboise-500);
	--plato-accent-primary-hover: var(--plato-framboise-600);
	--plato-accent-primary-active: var(--plato-framboise-700);

	/*
	 * Accessibilité (écart assumé au design système) : le blanc sur framboise 500
	 * ne fait que 4,1:1, sous le seuil AA de 4,5:1 pour du texte courant.
	 * Boutons et liens textuels utilisent donc framboise 600 (5,6:1) ;
	 * le 500 reste réservé aux surfaces décoratives sans texte.
	 */
	--plato-action: var(--plato-framboise-600);
	--plato-action-hover: var(--plato-framboise-700);
	--plato-action-active: var(--plato-framboise-800);
	--plato-text-meta: var(--plato-neutral-600);
	--plato-accent-positive: var(--plato-lagon-500);
	--plato-accent-positive-text: var(--plato-lagon-700);

	/* ---- Typographie ---- */
	--plato-font-display: 'Plato Fredoka', 'Fredoka', 'Plato Fira Sans', sans-serif;
	--plato-font-body: 'Plato Fira Sans', 'Fira Sans', system-ui, sans-serif;

	--plato-text-xs: 12px;
	--plato-text-sm: 13px;
	--plato-text-base: 15px;
	--plato-text-md: 16px;
	--plato-text-lg: 18px;
	--plato-text-xl: 20px;
	--plato-text-2xl: 24px;
	--plato-text-display-sm: 34px;
	--plato-text-display-md: 40px;
	--plato-text-display-lg: clamp(48px, 8vw, 104px);

	--plato-leading-tight: 0.98;
	--plato-leading-snug: 1.3;
	--plato-leading-normal: 1.55;
	--plato-leading-relaxed: 1.6;

	--plato-tracking-tight: -0.02em;
	--plato-tracking-wide: 0.05em;
	--plato-tracking-widest: 0.08em;

	/* ---- Espacements ---- */
	--plato-space-1: 4px;
	--plato-space-2: 8px;
	--plato-space-3: 12px;
	--plato-space-4: 16px;
	--plato-space-5: 20px;
	--plato-space-6: 24px;
	--plato-space-7: 32px;
	--plato-space-8: 40px;
	--plato-space-9: 48px;
	--plato-space-10: 64px;
	--plato-space-11: 96px;

	/* ---- Rayons ---- */
	--plato-radius-sm: 12px;
	--plato-radius-md: 16px;
	--plato-radius-lg: 20px;
	--plato-radius-xl: 26px;
	--plato-radius-pill: 999px;

	--plato-radius-scale-xs: 8px;
	--plato-radius-scale-sm: 14px;
	--plato-radius-scale-md: 22px;
	--plato-radius-scale-lg: 32px;

	/* ---- Ombres ---- */
	--plato-shadow-sm: 0 1px 2px rgba(42, 37, 54, 0.06);
	--plato-shadow-md: 0 4px 16px rgba(42, 37, 54, 0.08);
	--plato-shadow-lg: 0 12px 32px rgba(42, 37, 54, 0.12);
	--plato-shadow-glow: 0 12px 30px rgba(230, 49, 127, 0.28);

	/* ---- Blobs organiques (varier d'une instance à l'autre) ---- */
	--plato-blob-radius-a: 42% 58% 63% 37% / 48% 42% 58% 52%;
	--plato-blob-radius-b: 58% 42% 38% 62% / 52% 58% 42% 48%;
	--plato-blob-radius-c: 55% 45% 48% 52% / 52% 48% 52% 48%;

	/* ---- Focus clavier : halo framboise ---- */
	--plato-focus-ring: 0 0 0 3px var(--plato-framboise-100);
}