/* =====================================================
   TOKENS — Design system Franponator (issu de Claude Design)
   Ce fichier est nouveau : à importer AVANT global.css.
   Il ne redéfinit pas les @font-face (déjà self-hostées dans
   global.css) ni ne touche au --header-h/--footer-h existants.
   ===================================================== */
:root {
  /* --- Couleurs de marque (identiques aux valeurs déjà en dur
     dans global.css — on les nomme ici pour pouvoir les réutiliser) --- */
  --cachou: #20150F;
  --cerise-intense: #E10A3A;
  --beige-doux: #F4EDD5;
  --blanc: #FFFFFF;

  /* Teintes dérivées, pour les états (hover, disabled, textes secondaires) */
  --cachou-90: #2C1F17;
  --cachou-70: #4A3A31;
  --cachou-40: #8C7F76;
  --cachou-15: #DCD5CB;
  --cerise-press: #B80830;
  --cerise-hover: #F01243;
  --cerise-12: #FBE0E6;
  --beige-shade: #EAE1C5;
  --beige-deep: #DED4B6;

  /* Alias vers les variables déjà utilisées dans global.css,
     pour ne rien casser sur l'existant */
  --color-bg: var(--beige-doux);
  --color-primary: var(--cerise-intense);
  --color-dark: var(--cachou);

  /* --- Surfaces & texte sémantiques --- */
  --surface-page: var(--beige-doux);
  --surface-card: var(--beige-doux);
  --surface-raised: var(--blanc);
  --surface-inverse: var(--cachou);
  --surface-accent: var(--cerise-intense);
  --surface-sunken: var(--beige-shade);

  --text-body: var(--cachou);
  --text-muted: var(--cachou-70);
  --text-accent: var(--cerise-intense);
  --text-inverse: var(--beige-doux);
  --text-on-accent: var(--blanc);

  --border-hairline: 1px solid var(--cachou);
  --border-soft: 1px solid var(--cachou-15);
  --border-accent: 1px solid var(--cerise-intense);

  --focus-ring: 0 0 0 3px rgba(225, 10, 58, .35);

  /* --- Typographie --- */
  --font-display: 'geologica', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'geologica', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'newsreader', Georgia, 'Times New Roman', serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --type-hero-size: 72px;   --type-hero-lh: 1.02;  --type-hero-ls: -0.02em;
  --type-h1-size: 48px;     --type-h1-lh: 1.06;    --type-h1-ls: -0.015em;
  --type-h2-size: 32px;     --type-h2-lh: 1.12;    --type-h2-ls: -0.01em;
  --type-h3-size: 22px;     --type-h3-lh: 1.2;     --type-h3-ls: 0em;
  --type-eyebrow-size: 13px; --type-eyebrow-lh: 1.2; --type-eyebrow-ls: 0.06em;

  --type-body-lg-size: 18px; --type-body-lg-lh: 1.5;
  --type-body-size: 16px;    --type-body-lh: 1.55;
  --type-body-sm-size: 14px; --type-body-sm-lh: 1.5;
  --type-caption-size: 12px; --type-caption-lh: 1.4;

  --type-serif-lead-size: 24px; --type-serif-lead-lh: 1.35;
  --type-serif-size: 18px;      --type-serif-lh: 1.55;
  --type-tagline-size: 16px;    --type-tagline-lh: 1.3;

  /* --- Espacement --- */
  --space-0: 0;   --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px; --space-9: 96px; --space-10: 128px;

  --gutter: 24px;
  --gutter-lg: 32px;
  --page-max: 1120px;
  --page-pad: 32px;
  --stack: 16px;

  /* --- Rayons --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Élévation : l'identité est "print", pas de soft-shadow générique --- */
  --shadow-none: none;
  --shadow-lift: 0 2px 0 0 var(--cachou);
  --shadow-panel: 0 8px 24px rgba(32, 21, 15, .10);

  /* --- Mouvement --- */
  --ease-standard: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-loader: 1200ms;
  --press-scale: .97;
}

@keyframes fp-spin { to { transform: rotate(360deg); } }
@keyframes fp-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fp-stamp {
  0%   { opacity: 0; transform: scale(1.15) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(.98) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}