/* ============================================================
   tokens.css — Tokens du design system Cekonay (bundle autonome)
   Couleurs · Typographie · Espacements · Reset & utilitaires.
   Aucune dépendance externe. Typographie 100 % navigateur / OS
   pour un chargement optimal, sans police de marque chargée.
   ============================================================ */

:root {
  /* --- Orange de marque --- */
  --orange-50:#FDF3EA; --orange-100:#FBE2CE; --orange-200:#F8C49E;
  --orange-300:#FB9F5F; --orange-400:#FB8639; --orange-500:#F26A1B;
  --orange-600:#D9540C; --orange-700:#B24209;

  /* --- Encre chaude (jamais #000) --- */
  --ink-900:#1C1815; --ink-800:#2A2420; --ink-700:#3D352E;
  --ink-500:#6B5F55; --ink-400:#8C8174; --ink-300:#A89C8F;

  /* --- Papiers chauds (surfaces) --- */
  --paper:#FBF7F1; --paper-2:#F4ECE1; --paper-3:#EFE5D6;
  --card:#FFFFFF; --line:#E8DECF; --line-soft:#F0E8DB;

  /* --- Pastilles matières --- */
  --finish-bois:#B07B4F; --finish-pierre:#9AA09C; --finish-mat:#2C2A28;
  --finish-brillant:#E8B53A; --finish-blanc:#F3EEE6; --finish-effets:#C56A8E;

  /* --- États --- */
  --success-500:#2F8F5B; --success-50:#E7F3EC;
  --danger-500:#C8482E; --danger-50:#FBE9E4; --info-500:#3A6EA5;

  /* --- Alias sémantiques --- */
  --text-strong:var(--ink-900); --text-body:var(--ink-700);
  --text-muted:var(--ink-500); --text-faint:var(--ink-300);
  --text-on-accent:#FFFFFF; --text-link:var(--orange-600);
  --surface-page:var(--paper); --surface-alt:var(--paper-2);
  --surface-sunk:var(--paper-3); --surface-card:var(--card);
  --surface-inverse:var(--ink-900);
  --border-subtle:var(--line); --border-hair:var(--line-soft); --border-strong:var(--ink-900);
  --accent:var(--orange-500); --accent-hover:var(--orange-600); --accent-press:var(--orange-700);
  --accent-tint:var(--orange-50); --accent-tint-2:var(--orange-100);
  --focus-ring:var(--orange-400);

  /* --- Familles 100 % système / navigateur --- */
  --font-display:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-serif:ui-serif,Georgia,'Times New Roman',Times,serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* --- Graisses --- */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;

  /* --- Échelle d'affichage (fluide) --- */
  --fs-display:clamp(2.6rem,1.6rem + 4.4vw,5rem);
  --fs-h1:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);
  --fs-h2:clamp(1.65rem,1.25rem + 1.7vw,2.5rem);
  --fs-h3:clamp(1.35rem,1.1rem + 1vw,1.8rem);
  --fs-h4:1.25rem;

  /* --- Échelle texte --- */
  --fs-lead:1.225rem; --fs-body:1.0625rem; --fs-sm:0.9375rem;
  --fs-xs:0.8125rem; --fs-eyebrow:0.75rem;

  /* --- Interlignes / interlettrage --- */
  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.5; --lh-relaxed:1.72;
  --ls-tight:-0.02em; --ls-snug:-0.01em; --ls-normal:0; --ls-wide:0.04em; --ls-eyebrow:0.16em;

  /* --- Espacements (grille 4px) --- */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem;
  --space-8:3rem; --space-9:4rem; --space-10:5.5rem; --space-11:7rem;

  /* --- Rayons --- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --radius-xl:28px; --radius-card:18px; --radius-pill:999px;

  /* --- Ombres (chaudes, douces) --- */
  --shadow-xs:0 1px 2px rgba(28,24,21,0.06);
  --shadow-sm:0 2px 6px -1px rgba(28,24,21,0.08);
  --shadow-md:0 8px 24px -8px rgba(28,24,21,0.14);
  --shadow-lg:0 24px 60px -22px rgba(28,24,21,0.20);
  --shadow-accent:0 10px 24px -10px rgba(217,84,12,0.45);

  /* --- Mise en page --- */
  --content-narrow:680px; --content-default:1080px; --content-wide:1320px;
  --gutter:clamp(1.25rem,4vw,4rem); --header-h:72px;

  /* --- Mouvement --- */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

/* ---------- Reset léger + défauts typographiques ---------- */
*,*::before,*::after { box-sizing:border-box; }
.pdc-scope, .pdc-scope * { } /* portée éventuelle */

.eyebrow {
  font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--accent);
}

::selection { background:var(--orange-200); color:var(--ink-900); }

/* ---------- Prose longue (lecture d'article) ---------- */
.prose {
  font-family:var(--font-serif); font-size:var(--fs-lead);
  line-height:var(--lh-relaxed); color:var(--text-body);
}
.prose p { margin:0 0 var(--space-5); text-wrap:pretty; }
.prose h2,.prose h3 {
  font-family:var(--font-display); color:var(--text-strong);
  letter-spacing:var(--ls-tight); line-height:var(--lh-snug);
  margin:var(--space-7) 0 var(--space-4);
}
.prose h2 { font-size:var(--fs-h3); }
.prose h3 { font-size:var(--fs-h4); }
.prose a { color:var(--text-link); text-decoration:underline; text-underline-offset:3px; }
.prose img { max-width:100%; height:auto; border-radius:var(--radius-md); display:block; margin:var(--space-5) 0; }
.prose blockquote {
  margin:var(--space-7) 0; padding:4px 0 4px var(--space-5);
  border-left:4px solid var(--accent);
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:1.55rem; line-height:1.2; color:var(--text-strong); letter-spacing:var(--ls-tight);
}
.prose ul,.prose ol { margin:0 0 var(--space-5); padding-left:1.4em; }
.prose li { margin-bottom:var(--space-2); }