/* Designtokens, reset och body */

:root{
  /* Bakgrunder: sidan blir varmare för varje kapitel */
  --paper: #F7F4EE;   /* Start */
  --sand: #F3EBDF;    /* Kapitel 1 */
  --peach: #F6E7D8;   /* Kapitel 4 */
  --apricot: #F5D6BF; /* Kapitel 5, slutet på gradienten */
  --cocoa: #2A2320;   /* Alla mörka ytor */
  --bg: var(--paper);
  --bg-alt: var(--sand);
  --ink: #221E1B;
  --ink-soft: #6B655F;
  --orange: #FF6C2C;
  --orange-bright: var(--orange);
  --taupe: #89817F;
  --green: #008780;
  --yellow: #E6B012;
  --red: #D12421;
  --chip: #FFFFFF;
  --chip-logo: #FFFCF7;
  --border: rgba(34,30,27,0.10);
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-poster: "Bebas Neue", sans-serif;
  --font-body: "Bricolage Grotesque", sans-serif;  /* Två familjer: Bebas för rubriker, Bricolage för allt annat */
  /* Typografisk skala: en storlek per rubriknivå */
  --fs-display: clamp(72px, 13vw, 180px);   /* Hero – bara startsektionen */
  --fs-statement: clamp(64px, 9vw, 150px);  /* Kapitel-påstående ("Känner du igen dig?") */
  --fs-h2: clamp(44px, 6vw, 92px);          /* Sektionsrubrik */
  --fs-h3: clamp(30px, 3.6vw, 52px);        /* Underrubrik inom en sektion */
  --fs-eyebrow: 13px;                       /* Liten inledare ovanför rubrik */
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: auto; }
html, body{ overflow-x: clip; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* Ingen zoom vid dubbeltryck (t.ex. när man trycker snabbt på korten i "Andra som du").
   Startsidan styr själv svepen, så en inzoomad sida gick inte att zooma ut ur. Nyp-zoom fungerar fortfarande. */
html{ touch-action: manipulation; }