/* Cers Web — jetons de design en trois couches (primitives → sémantique → composants).
   Source : docs/brand-guidelines.md, synchronisée par le skill brand. */

/* === PRIMITIVES === */
:root {
  --p-green-500:#0F3A2E; --p-green-600:#0A2A21; --p-green-400:#14493A; --p-green-200:#9FB0AB;
  --p-teal-500:#2C7A73; --p-teal-100:#D5E4E3; --p-teal-50:#EAF2F1;
  --p-genet-500:#F2BE22; --p-genet-600:#CEA21D; --p-genet-100:#FCF2D3;
  --p-white:#FFFFFF; --p-paper:#EEF2EC; --p-mist:#E2E9E2; --p-card:#F8FAF6; --p-ink:#0D211B; --p-slate:#56675F; --p-rule:#D3DCD5; --p-on-dark:#F2F6F2; --p-on-dark-muted:#A8BFB5;
  --p-red-600:#B4321F;

  --p-font-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --p-font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --p-space-1:4px; --p-space-2:8px; --p-space-3:12px; --p-space-4:16px; --p-space-5:24px; --p-space-6:32px; --p-space-7:48px; --p-space-8:64px; --p-space-9:96px; --p-space-10:144px;
  --p-radius-sm:10px; --p-radius-md:14px; --p-radius-lg:24px; --p-radius-pill:999px;
  --p-dur-fast:150ms; --p-dur-base:220ms; --p-dur-slow:700ms;
  --p-ease-out:cubic-bezier(.16,.8,.2,1);
}

/* === SEMANTIC === */
:root {
  color-scheme: light;
  --color-bg:var(--p-paper);
  --color-card:var(--p-card);
  --color-surface:var(--p-mist);
  --color-text:var(--p-ink);
  --color-text-muted:var(--p-slate);
  --color-border:var(--p-rule);
  --color-brand:var(--p-green-500);
  --color-brand-strong:var(--p-green-600);
  --color-brand-raised:var(--p-green-400);
  --color-on-brand:var(--p-on-dark);
  --color-on-brand-muted:var(--p-on-dark-muted);
  --color-link:var(--p-teal-500);
  --color-link-soft:var(--p-teal-50);
  --color-cta:var(--p-genet-500);
  --color-cta-hover:var(--p-genet-600);
  --color-on-cta:var(--p-ink);
  --color-error:var(--p-red-600);
  --color-focus:var(--p-teal-500);

  --font-display:var(--p-font-display);
  --font-body:var(--p-font-body);

  --space-section:clamp(var(--p-space-8), 11vw, var(--p-space-10));
  --space-gutter:20px;
  --radius-card:var(--p-radius-md);
  --radius-panel:var(--p-radius-lg);
  --radius-pill:var(--p-radius-pill);
  --motion-fast:var(--p-dur-fast);
  --motion-base:var(--p-dur-base);
  --motion-reveal:var(--p-dur-slow);
  --ease-out:var(--p-ease-out);
  --shadow-float:0 40px 80px -40px rgba(13,33,27,.45), 0 0 0 1px rgba(13,33,27,.08);
}

/* === COMPONENTS === */
:root {
  --btn-primary-bg:var(--color-cta);
  --btn-primary-bg-hover:var(--color-cta-hover);
  --btn-primary-fg:var(--color-on-cta);
  --btn-icon-bg:var(--color-text);
  --btn-icon-fg:var(--color-cta);
  --header-bg:rgba(238,242,236,.86);
  --header-border:var(--color-border);
  --input-bg:var(--color-surface);
  --input-border-focus:var(--color-focus);
  --plan-featured-bg:var(--color-brand);
  --plan-featured-fg:var(--color-on-brand);
  --marquee-bg:var(--color-brand);
  --marquee-fg:var(--color-on-brand);
  --marquee-outline:var(--color-on-brand-muted);

  /* Modèles de démonstration (marques fictives) */
  --demo-chrome-bg:#EEF1EE; --demo-chrome-dot:#CFD8D2; --demo-chrome-text:#6B7A73;
}