/* Bar Frans x Web Athletes — design tokens + shared styles
   Colors, type scale, spacing, radii and shadows are taken verbatim from the
   design handoff README (Design Tokens section). */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
}

:root {
  /* Colors */
  --ink: #1f2a22;
  --terracotta: #c0532f;
  --salmon: #e7a386;
  --forest: #34463a;
  --cream: #f4ece0;
  --paper: #fbf7f0;
  --sand: #e8dccb;
  --sand-2: #ece2d2;
  --line: #d3c7b4;
  --line-2: #b0a58f;
  --body-2: #3f4a40;
  --muted: #666b60;
  --on-dark: #cfd5ca;
  --on-dark-2: #e3e7df;
  --border-dark: #5a6e5f;
  --border-dark-2: #7d9082;
  --open-green: #5f8a5f;
  --google-blue: #1a4fb4;

  /* Type */
  --font-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shape */
  --container-w: min(1180px, 92vw);
  --section-pad: clamp(3.5rem, 7vw, 6rem);
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-hero: 220px 220px 18px 18px;

  /* Hard offset shadows (neo-brutalist) */
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 6px 6px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  --shadow-xl: 10px 10px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: var(--terracotta); text-decoration: none; }
a:hover { color: var(--ink); }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 138, 95, .55); }
  50% { box-shadow: 0 0 0 7px rgba(95, 138, 95, 0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.container { width: var(--container-w); margin-inline: auto; }
.section { padding: var(--section-pad) 0; }

/* Section label ("01 — VOOR & NA") */
.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--terracotta);
}
.section-label--on-dark { color: var(--salmon); }
.section-label--on-salmon { color: var(--ink); }

/* Headings */
h1, .h1 {
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 7.6rem);
  line-height: .86;
  letter-spacing: -.045em;
  text-wrap: balance;
}
h2, .h2 {
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin-top: .3em;
}
.h2--aanbod { font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: .92; letter-spacing: -.04em; }
.h2--cta { font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: .9; letter-spacing: -.045em; margin-top: .2em; }

.italic {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
}
.accent { color: var(--terracotta); }
.accent--on-dark { color: var(--salmon); }

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: var(--terracotta);
}
.intro {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  max-width: 44ch;
  margin-top: 1.4em;
  color: var(--body-2);
  text-wrap: pretty;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  border-radius: var(--radius-pill);
  transition: transform .2s, background .2s, color .2s, box-shadow .2s;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}
.btn--lg { padding: .95em 1.5em; }
.btn--pill-sm { padding: .45em 1.05em; font-size: .88rem; }
.btn--solid { background: var(--terracotta); color: var(--paper); }
.btn--solid:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--terracotta); color: var(--paper); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--outline-light { border: 2px solid var(--paper); color: var(--paper); background: transparent; }
.btn--outline-light:hover { background: var(--paper); color: var(--terracotta); }
.btn--cta { background: var(--terracotta); color: var(--paper); font-size: 1.05rem; padding: 1em 1.8em; }
.btn--cta:hover { transform: translateY(-3px); background: var(--paper); color: var(--terracotta); }
.btn--frame { border: 2px solid var(--ink); color: var(--paper); background: var(--ink); box-shadow: var(--shadow-sm); }
.btn--frame:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.btn--frame-outline { border: 2px solid var(--ink); color: var(--ink); background: var(--paper); }
.btn--frame-outline:hover { background: var(--ink); color: var(--paper); }

/* Toggle pill group (voor/na, price switch) */
.toggle {
  display: flex;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  width: max-content;
  max-width: 100%;
}
.toggle__btn {
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  padding: .6em 1.2em;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  transition: background .25s, color .25s;
}
.toggle__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .88rem;
  font-weight: 600;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: .45em 1em;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--terracotta);
}
.status-dot--open { background: var(--open-green); animation: pulse 1.8s infinite; }

/* Cards */
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  padding: 1.5em;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-md); }
.card__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--terracotta);
  line-height: 1;
}
.card__text { margin-top: .7em; color: var(--body-2); font-size: .96rem; }

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Responsive images */
picture { display: block; }
picture img { width: 100%; height: 100%; object-fit: cover; }