/* =====================================================================
   La Manufakture Krimmeri — Design tokens
   Source palette: site actuel (jaune électrique #ffea3c / noir / blanc).
   Vibe: entrepôt industriel + plage d'été + festival.
   One signal color (yellow). Neutrals carry the rest. Discipline = anti-slop.
   ===================================================================== */

/* ---- Self-hosted fonts -------------------------------------------- */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900; /* variable */
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

:root {
  /* ---- Color: raw brand ------------------------------------------- */
  --signal: #ffea3c;        /* the one bold color, straight from the site */
  --signal-deep: #f2c200;   /* darker yellow for borders/hover on light */

  /* ---- Color: neutrals (warm, sand + concrete) -------------------- */
  --bg: #f6f1e6;            /* warm paper page background */
  --surface: #ffffff;       /* cards */
  --surface-2: #efe6d3;     /* sand panels */
  --dark: #17150f;          /* warm near-black (concrete) */
  --dark-2: #221f16;
  --ink: #16140e;           /* primary text on light */
  --ink-2: #514c3b;         /* muted text */
  --ink-3: #6b6450;         /* subtle text / captions (AA on sand) */

  /* ---- Feedback / danger ------------------------------------------ */
  --danger: #b42318;
  --danger-bg: #fdecea;
  --danger-ink: #841b13;
  --on-dark: #f6f1e6;       /* text on dark */
  --on-dark-2: #c4bca6;     /* muted text on dark */

  /* ---- Lines & shadows -------------------------------------------- */
  --line: rgba(22, 20, 14, 0.14);
  --line-2: rgba(22, 20, 14, 0.28);
  --line-ink: #16140e;      /* hard poster border */
  --line-on-dark: rgba(246, 241, 230, 0.16);
  --shadow-hard: 5px 5px 0 var(--ink);          /* signature poster shadow */
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 0 1px 2px rgba(22,20,14,.05), 0 8px 24px rgba(22,20,14,.06);

  /* ---- Radius (mostly square / industrial) ------------------------ */
  --r-0: 0px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* ---- Fluid type scale (base 1rem, ~1.25 major third) ------------ */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 1.0rem + 0.25vw, 1.2rem);
  --fs-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  --fs-xl: clamp(1.55rem, 1.25rem + 1.3vw, 2.4rem);
  --fs-2xl: clamp(2.1rem, 1.5rem + 3vw, 3.8rem);
  --fs-3xl: clamp(2.9rem, 1.9rem + 5.4vw, 6.4rem);
  --fs-4xl: clamp(3.4rem, 1.7rem + 9vw, 9.5rem);

  /* ---- Spacing (4 / 8 rhythm) ------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Layout ----------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Motion (Emil Kowalski curves) ------------------------------ */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 140ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* ---- Z-index scale ---------------------------------------------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* ---- Type roles ------------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: light;
}
