/* variables.css — design tokens */

:root {
  /* palette (limitata, accento raro) */
  --bg: #e8e6df;
  --bg-2: #d8d5cc;
  --fg: #111111;
  --muted: #77756e;
  --line: rgba(17, 17, 17, .18);
  --accent: #ff4d00;

  --dark: #111111;
  --dark-2: #161616;
  --dark-fg: #e8e6df;
  --dark-muted: #8a877e;
  --dark-line: rgba(232, 230, 223, .16);

  /* tipografia */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* spaziatura */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --page-padding: clamp(20px, 3vw, 60px);
  --card-gap: 14px;
  /* hold: percorso extra in cui la card resta ferma a piena viewport
     prima che la successiva inizi a entrare (ENTER → HOLD → EXIT) */
  --chapter-hold: 48svh;

  /* easing */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);

  /* durate */
  --t-micro: .28s;
  --t-med: .7s;
  --t-big: 1.2s;

  /* layer */
  --z-lambda: 1;
  --z-chapter: 2;
  --z-header: 40;
  --z-rail: 40;
  --z-cursor: 60;
  --z-overlay: 70;
  --z-menu: 80;
  --z-boot: 100;
}