/*
 * Design tokens — La Petite Crevette
 * Source : design_handoff_lpc/README.md §Design tokens
 * Ces variables sont également déclarées dans theme.json (palette + font sizes)
 * pour apparaître dans l'éditeur Gutenberg.
 */

:root {
  /* ---------- Couleurs fond ---------- */
  --lpc-bg: #FBF7F0;
  --lpc-bg-2: #F4EDE0;
  --lpc-bg-3: #EDE4D3;

  /* ---------- Encre (textes, accents sombres) ---------- */
  --lpc-ink: #2A2420;
  --lpc-ink-2: #5A4E45;
  --lpc-ink-3: #8C7F72;

  /* ---------- Bordures ---------- */
  --lpc-line: #E6DCC8;

  /* ---------- Accents ---------- */
  /* Accent principal : vert (ex-terracotta #C86B4F / #A8543B / #F3D9CC).
     Les noms --lpc-terra* sont conservés pour ne pas toucher aux ~80 usages. */
  --lpc-terra: #557A55;
  --lpc-terra-dark: #3F5E40;
  --lpc-terra-soft: #DCE7D6;
  --lpc-sage: #7A8B6E;
  --lpc-sage-soft: #D6DECC;
  --lpc-butter: #E9C57A;
  --lpc-butter-soft: #FAEACC;
  --lpc-butter-dark: #7A5C1F;
  --lpc-rose: #E8B5A4;
  --lpc-rose-deep: #D99684;
  --lpc-ocean: #5B7788;
  --lpc-ocean-soft: #D4DEE5;

  /* ---------- Familles de polices ---------- */
  --lpc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --lpc-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lpc-font-script: "Caveat", "Brush Script MT", cursive;

  /* ---------- Échelle typographique ---------- */
  --lpc-fs-h1: clamp(42px, 5vw, 68px);
  --lpc-fs-h2: clamp(28px, 3.5vw, 44px);
  --lpc-fs-h3: 24px;
  --lpc-fs-body: 16px;
  --lpc-fs-body-lg: 17px;
  --lpc-fs-small: 13px;
  --lpc-fs-meta: 12px;

  --lpc-lh-tight: 0.98;
  --lpc-lh-snug: 1.05;
  --lpc-lh-base: 1.5;
  --lpc-lh-loose: 1.6;

  --lpc-ls-tight: -0.035em;

  /* ---------- Radius ---------- */
  --lpc-radius-sm: 10px;
  --lpc-radius: 18px;
  --lpc-radius-lg: 28px;
  --lpc-radius-pill: 999px;

  /* ---------- Ombres ---------- */
  --lpc-shadow-sm: 0 1px 2px rgba(42,36,32,.04), 0 2px 8px rgba(42,36,32,.04);
  --lpc-shadow: 0 4px 14px rgba(42,36,32,.06), 0 12px 32px rgba(42,36,32,.06);
  --lpc-shadow-lg: 0 8px 28px rgba(42,36,32,.08), 0 24px 56px rgba(42,36,32,.10);

  /* ---------- Espacements (échelle 4px) ---------- */
  --lpc-space-1: 4px;
  --lpc-space-2: 8px;
  --lpc-space-3: 12px;
  --lpc-space-4: 16px;
  --lpc-space-5: 20px;
  --lpc-space-6: 24px;
  --lpc-space-8: 32px;
  --lpc-space-10: 40px;
  --lpc-space-12: 48px;
  --lpc-space-14: 56px;
  --lpc-space-16: 64px;
  --lpc-space-20: 80px;
  --lpc-space-24: 96px;

  /* ---------- Padding section ---------- */
  --lpc-section-py-desktop: var(--lpc-space-20);
  --lpc-section-py-mobile: var(--lpc-space-10);
  --lpc-section-px-desktop: 56px;
  --lpc-section-px-mobile: 18px;

  /* ---------- Container max-widths ---------- */
  --lpc-container: 1240px;
  --lpc-container-narrow: 960px;
  --lpc-container-wide: 1440px;

  /* ---------- Transitions ---------- */
  --lpc-t-fast: 150ms ease;
  --lpc-t-base: 220ms ease;
  --lpc-t-slow: 300ms ease-out;
}