/* ============================================================
   PANCAKE COMPANY — Brand System
   Amsterdam · Singel / Bloemenmarkt
   Heritage gold × tulip coral × canal green on warm cream
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Hanken+Grotesque:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Core palette ---- */
  --ink:        #211a14;   /* warm near-black */
  --ink-soft:   #5a4d40;   /* muted brown-grey text */
  --cream:      #fbf3e3;   /* primary paper */
  --cream-2:    #f5e8cf;   /* deeper sand panel */
  --cream-3:    #efe0c4;   /* card edge / fill */

  --gold:       #e0a431;   /* heritage stroop gold (evolved from original) */
  --gold-deep:  #b97e1c;   /* darker gold for text on cream */
  --gold-soft:  #f0cf7e;

  --tulip:      #df5440;   /* Bloemenmarkt tulip coral-red — the playful pop */
  --tulip-deep: #b93a2c;

  --canal:      #2f6b5b;   /* deep canal green — quiet support */
  --canal-deep: #224f43;

  --delft:      #2a567f;   /* optional Delft blue accent */

  --white:      #fffdf8;

  /* ---- Type ---- */
  --display: 'Bricolage Grotesque', sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --body:    'Hanken Grotesque', system-ui, sans-serif;

  /* ---- Radius / shadow ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(33,26,20,.08);
  --shadow-md: 0 12px 34px -12px rgba(33,26,20,.28);
  --shadow-lg: 0 30px 70px -24px rgba(33,26,20,.42);

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

/* ---------- Type helpers ---------- */
.font-display{ font-family: var(--display); }
.font-serif{ font-family: var(--serif); }
.eyebrow{
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  color: var(--gold-deep);
}
.script-accent{
  font-family: var(--serif);
  font-style: italic;
}

h1,h2,h3,h4{ font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; margin:0; }
p{ margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 2px solid var(--ink); cursor: pointer; text-decoration:none;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary{ background: var(--ink); color: var(--cream); }
.btn-primary:hover{ background: var(--tulip); border-color: var(--tulip); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-gold{ background: var(--gold); color: var(--ink); border-color: var(--ink); }
.btn-gold:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--cream); }

/* ---------- Utility ---------- */
.tape{
  display:inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  font-weight:700; font-size:12px; letter-spacing:.04em;
}
.badge-gf{ background: var(--canal); color: var(--white); }
.badge-vg{ background: var(--tulip); color: var(--white); }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* scalloped / stroopwafel edge used as a brand motif */
.scallop{
  --c: var(--gold);
  background:
    radial-gradient(circle at 8px 0, transparent 7px, var(--c) 8px) repeat-x;
  background-size: 16px 16px;
}