/* Slijterij Jeppe. Alle kleuren, lettertypen en ruimtes staan hier. */
@font-face{font-family:"Grenze Gotisch";src:url(../fonts/grenze-gotisch.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(../fonts/familjen-grotesk.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(../fonts/familjen-grotesk-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  /* Vaste kleuren */
  --night:#0d1433;
  --night-2:#151e48;
  --cream:#f7efdc;
  --white:#fff;
  --off:#f9f3e5;
  --tile:#f7efdc;
  --amber:#f6ad25;
  --cherry:#d3304a;
  --moss:#2f7d58;
  --moss-light:#7fd6a8;
  --wine:#74182f;

  /* Betekenis: standaard wit met nachtblauwe tekst */
  --bg:var(--white);
  --bg-raised:var(--white);
  --fg:var(--night);
  --fg-soft:#4a4d68;
  --line:rgba(13,20,51,.14);
  --field:var(--white);
  --stock:var(--moss);
  --accent-text:var(--night);

  /* Letters */
  --font-display:"Grenze Gotisch","UnifrakturCook",Georgia,serif;
  --font-body:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --size-small:.875rem;
  --size-body:1.0625rem;
  --size-lead:clamp(1.125rem,1.5vw,1.3125rem);
  --size-h3:clamp(1.625rem,2.2vw,2rem);
  --size-h2:clamp(2.5rem,4.6vw,4rem);
  --size-h1:clamp(3rem,6.5vw,6rem);

  /* Ruimte en maat */
  --container:1280px;
  --gutter:clamp(16px,4vw,48px);
  --section:clamp(64px,8vw,120px);
  --radius:4px;
  --arch:999px 999px 0 0;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* Room: achter paginakoppen en tussensecties */
.band-soft{--bg:var(--off);--tile:var(--white);background:var(--bg);color:var(--fg)}

/* Nachtblauw: de voet en een enkele sectie */
.band-night{--bg:var(--night);--bg-raised:var(--night-2);--tile:var(--night-2);--fg:var(--cream);--fg-soft:#c6c6d8;--line:rgba(247,239,220,.2);--field:rgba(247,239,220,.07);--stock:var(--moss-light);--accent-text:var(--amber);background:var(--bg);color:var(--fg)}

/* Amber: het blok boven de voet */
.band-amber{--bg:var(--amber);--fg:var(--night);--fg-soft:#3a2c10;--line:rgba(13,20,51,.3);--accent-text:var(--night);background:var(--bg);color:var(--fg)}

/* Kleur per categorie: alleen op de categorievlakken en de categoriekop */
.tone-wijn{--tone:var(--wine);--fg:var(--cream);--fg-soft:#eedfd0;--line:rgba(247,239,220,.3);--accent-text:var(--amber)}
.tone-bier{--tone:var(--amber);--fg:var(--night);--fg-soft:#3a2c10;--line:rgba(13,20,51,.3);--accent-text:var(--night)}
.tone-sterke-drank{--tone:#2a43b8;--fg:var(--cream);--fg-soft:#dfe3f6;--line:rgba(247,239,220,.3);--accent-text:var(--amber)}
.tone-alcoholvrij{--tone:#a8cdb0;--fg:var(--night);--fg-soft:#2b3a30;--line:rgba(13,20,51,.3);--accent-text:var(--night)}
.tone-cadeaus{--tone:#f2b8ae;--fg:var(--night);--fg-soft:#4a2a24;--line:rgba(13,20,51,.3);--accent-text:var(--night)}