/* =============================================================================
 * Shaym Nettoyage — Tokens du Design System
 * Copie conforme de `_ds/shaym-nettoyage-design-system-caf70b94.../tokens/*.css`
 * (Claude Design). Ordre de concaténation identique à `styles.css` :
 * colors → typography → spacing → base.
 *
 * NE PAS MODIFIER À LA MAIN : ce fichier est le miroir du design system.
 * Toute personnalisation va dans `theme.css`.
 *
 * Les webfonts (fonts.css) sont chargées par `inc/enqueue.php`.
 * ========================================================================== */

/* --- tokens/colors.css --------------------------------------------------- */
/* Shaym Nettoyage — couleurs. Base : logo (navy #073F80, orange #FB8814, cyan #0281C3) */
:root{
/* Navy — confiance, solidité (couleur primaire) */
--navy-50:#F0F4FA;--navy-100:#DEE8F4;--navy-200:#BCD0E9;--navy-300:#8FAFD8;--navy-400:#5A87C2;--navy-500:#2E63A8;--navy-600:#124E93;--navy-700:#073F80;--navy-800:#0A3263;--navy-900:#0B2749;--navy-950:#071A31;
/* Orange sécurité — action, chantier (couleur d'accent CTA) */
--orange-50:#FFF4E8;--orange-100:#FEE4C7;--orange-200:#FDCA92;--orange-300:#FCAD53;--orange-400:#FB8814;--orange-500:#E27506;--orange-600:#C05F04;--orange-700:#9A4C06;
/* Cyan propreté — secondaire, à petites doses */
--cyan-50:#E9F6FC;--cyan-100:#CFEBF8;--cyan-300:#6BC1E8;--cyan-500:#0281C3;--cyan-700:#046192;
/* Neutres froids (teinte bleutée) */
--gray-0:#FFFFFF;--gray-25:#FAFBFD;--gray-50:#F5F7FA;--gray-100:#EDF1F6;--gray-200:#E0E6EF;--gray-300:#C9D3E0;--gray-400:#A5B2C4;--gray-500:#7C8BA1;--gray-600:#5B6B84;--gray-700:#41526B;--gray-800:#2B3B54;--gray-900:#16253C;
/* Sémantiques */
--green-500:#178A50;--green-50:#E9F6EF;--red-500:#D63A21;--red-50:#FCEEEB;--yellow-400:#F7CE23;--yellow-700:#8F6A00;--yellow-50:#FEF8E2;
/* Alias sémantiques — à utiliser en priorité */
--primary:var(--navy-700);--primary-hover:var(--navy-800);--primary-pressed:var(--navy-900);
--accent:var(--orange-400);--accent-hover:var(--orange-500);--accent-pressed:var(--orange-600);
--surface-page:var(--gray-0);--surface-alt:var(--gray-50);--surface-card:var(--gray-0);--surface-inset:var(--gray-100);
--surface-dark:var(--navy-900);--surface-dark-2:var(--navy-950);--surface-dark-card:#10315A;
/* `--text-body` (couleur) renommé en `--color-text-body` : le design system
 * redéfinissait `--text-body` en taille dans typography.css, chargé ensuite,
 * ce qui rendait `body { color: var(--text-body) }` invalide (texte en noir).
 * Vérifié : aucune maquette n'utilise `--text-body` comme couleur (24 usages,
 * tous en `font-size`). Le renommage est donc sans effet de bord. */
--text-heading:var(--navy-950);--color-text-body:var(--gray-800);--text-muted:var(--gray-600);--text-faint:var(--gray-500);
--text-on-dark:#FFFFFF;--text-on-dark-muted:#A9BBD4;--text-on-accent:#FFFFFF;
--border-default:var(--gray-300);--border-subtle:var(--gray-200);--border-on-dark:rgba(255,255,255,.14);
--link:var(--navy-600);--link-hover:var(--navy-800);
--success:var(--green-500);--success-bg:var(--green-50);--error:var(--red-500);--error-bg:var(--red-50);--warning:var(--yellow-700);--warning-bg:var(--yellow-50);--info:var(--cyan-500);--info-bg:var(--cyan-50);
--focus-ring:0 0 0 3px rgba(7,63,128,.18);--focus-ring-error:0 0 0 3px rgba(214,58,33,.16);--focus-ring-accent:0 0 0 3px rgba(251,136,20,.28);
}

/* --- tokens/typography.css ----------------------------------------------- */
/* Shaym Nettoyage — typographie. Barlow (titres, boutons) + Public Sans (corps) */
/* `--text-body` reste ici la TAILLE (1rem) : c'est le seul sens dans lequel les
 * maquettes l'emploient. La couleur correspondante vit sous `--color-text-body`. */
:root{
--font-display:'Barlow',-apple-system,'Segoe UI',sans-serif;
--font-body:'Public Sans',-apple-system,'Segoe UI',sans-serif;
--font-mono:ui-monospace,Consolas,monospace;
/* Échelle (desktop) */
--text-h1:3.5rem;--text-h1-mobile:2.25rem;--text-h2:2.5rem;--text-h2-mobile:1.75rem;--text-h3:1.75rem;--text-h4:1.25rem;
--text-lead:1.125rem;--text-body:1rem;--text-small:.875rem;--text-caption:.75rem;--text-overline:.8125rem;--text-button:.9375rem;
/* Graisses */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;
/* Interlignage & interlettrage */
--leading-display:1.06;--leading-heading:1.15;--leading-body:1.6;--leading-small:1.45;
--tracking-display:-0.015em;--tracking-heading:-0.01em;--tracking-overline:.1em;--tracking-button:.01em;
}

/* --- tokens/spacing.css --------------------------------------------------- */
/* Shaym Nettoyage — espacement, rayons, ombres, mouvement, grille */
:root{
/* Espacement — base 4px */
--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--space-5xl:128px;
/* Rayons — volontairement contenus (rigueur, aspect « carré ») */
--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-full:999px;
/* Ombres — froides, discrètes */
--shadow-sm:0 1px 2px rgba(7,26,49,.06);
--shadow-md:0 2px 8px -2px rgba(7,26,49,.10),0 1px 2px rgba(7,26,49,.05);
--shadow-lg:0 12px 32px -8px rgba(7,26,49,.18);
--shadow-dark:0 16px 40px -12px rgba(4,12,24,.45);
/* Mouvement — sobre, jamais de rebond */
--ease-out:cubic-bezier(.2,.7,.3,1);
--duration-fast:120ms;
--duration-base:180ms;
--duration-slow:260ms;
/* Grille & mise en page */
--container:1200px;--gutter:24px;--gutter-mobile:16px;--section-pad:96px;--section-pad-mobile:56px;
/* Contrôles */
--control-h-sm:40px;--control-h-md:48px;--control-h-lg:56px;
--z-header:100;
--z-overlay:500;
}

/* --- tokens/base.css ------------------------------------------------------ */
/* Défauts d'éléments minimaux */
body{font-family:var(--font-body);color:var(--color-text-body);font-size:var(--text-body);line-height:var(--leading-body);margin:0;background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
::selection{background:var(--navy-200)}
