/*
 * Piloxa Design System — tokens.css
 * Variables CSS et reset de base.
 *
 * Source : .claude/skills/Piloxa new design system/Piloxa DS Static.html (section 1 TOKENS + section 2 BASE).
 * Plan : docs/refactor/design-system-piloxa.md (Phase 0).
 *
 * Polices à charger côté HTML (ne pas @import ici, perf + preconnect) :
 *   <link rel="preconnect" href="https://use.typekit.net" />
 *   <link rel="preconnect" href="https://fonts.googleapis.com" />
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 *   <link rel="stylesheet" href="https://use.typekit.net/urf3wdj.css" />
 *   <link rel="stylesheet"
 *         href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />
 */

/* 1 · TOKENS */
:root {
  /* Couleurs — palette de marque */
  --pi-cream:#F4EFE4; --pi-cream-2:#EFE9DB; --pi-card:#FFFFFF;
  --pi-ink:#0E1428; --pi-ink-soft:#1A1F35; --pi-muted:#6B6678;
  --pi-violet:#C5B5F9; --pi-violet-2:#D6CAFB; --pi-violet-3:#E2D9FC;
  --pi-purple:#7A5BE8; --pi-purple-press:#5E3FD1;
  --pi-lime:#C9F03B; --pi-lime-soft:#DAFA63;
  --pi-coral:#FF6363; --pi-coral-soft:#FFD8D8;
  --pi-sun:#F8DD2C; --pi-sun-soft:#FFF1A8;
  --pi-divider:rgba(14,20,40,0.10);

  /* Couleurs — statut (correction Phase 0 #1 : extraction des hex codés en dur) */
  --pi-success:#0F8550;
  --pi-warn:#8A6E00;
  --pi-error:#B00020;

  /* Jetons sémantiques de statut (composant .piloxa-status — handoff-statuts).
     amber = --pi-warn (#8A6E00) réutilisé. */
  --pi-success-soft:rgba(15,133,80,0.12);
  --pi-amber-soft:rgba(248,221,44,0.22);
  --pi-orange:#C2531B;
  --pi-orange-soft:rgba(217,99,43,0.16);
  --pi-ink-soft-bg:rgba(14,20,40,0.07);

  /* Typographie */
  --ff-display:"fatfrank","FatFrank",system-ui,sans-serif; --fw-display:400;
  --ff-body:"Poppins",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;

  /* Spacing (correction Phase 0 #2 : valeurs déduites de la vitrine sp-grid) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* Elevation */
  --sh-1:0 6px 14px rgba(14,20,40,0.04);
  --sh-2:0 22px 40px -18px rgba(14,20,40,0.18);
  --sh-3:0 24px 60px rgba(14,20,40,0.12);

  /* Icônes — préfixe legacy conservé (cf. plan correction #4) */
  --piloxa-icon-accent:var(--pi-lime); --piloxa-icon-outline:var(--pi-ink);
}

/* 2 · BASE */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--pi-cream);color:var(--pi-ink);font-family:var(--ff-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:var(--fw-display);letter-spacing:-0.02em;line-height:1.02;margin:0;}
h1{font-size:84px;letter-spacing:-0.03em;}
h2{font-size:44px;}
h3{font-size:28px;}
h4{font-size:20px;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
code{font-family:var(--ff-mono);font-size:12px;background:var(--pi-cream-2);padding:2px 6px;border-radius:4px;}
ul{margin:0;padding:0;list-style:none;}