/* ─────────────────────────────────────────────────────────────
   Broodje Kip Dag — colors_and_type.css
   The brand foundations: roadside Dutch broodje shop, scrappy
   hand-painted, fat playful display type, mustard + cola red.
   ───────────────────────────────────────────────────────────── */

/* ── Fonts (Google Fonts substitutions; see README for notes) ── */
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo+Black&family=Caveat:wght@500;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ── BRAND COLORS ────────────────────────────────────────────
     Pulled from the Délicieux Westerval photo:
     - mosterd / kip-geel  = the painted menu board
     - tomaat              = the cola-red Coca-Cola panel + OPEN sign
     - nacht               = the dark navy fascia above the windows
     - room                = the bread/cream background tone
     - korst               = sandwich crust brown
     - lucht               = winter Twente sky
     - blad                = lettuce green (for the "yes!" vote)
     ───────────────────────────────────────────────────────── */
  --kip-geel:       #F4B942;   /* primary brand yellow — menu-board */
  --mosterd:        #E89C1C;   /* deeper mustard, hover/press      */
  --mosterd-diep:   #B97208;   /* mustard ink — for type on yellow */
  --tomaat:         #D6232B;   /* cola red — alerts, "OPEN", "no" */
  --tomaat-diep:    #9C1119;
  --nacht:          #1A2B47;   /* fascia navy — primary ink / dark surface */
  --nacht-2:        #243558;   /* navy hover */
  --room:           #F5EBD7;   /* page background, default cream  */
  --room-diep:      #ECDFC2;   /* card on cream                    */
  --korst:          #8B5A2B;   /* bread crust, secondary accent    */
  --korst-licht:    #C68641;
  --lucht:          #A8C8E0;   /* sky tint, info accent            */
  --blad:           #6BA84F;   /* lettuce green, "ja" vote         */
  --blad-diep:      #4A7A36;

  /* ── NEUTRALS (warm, not greys — printed on cream paper) ─── */
  --papier:         #FBF6EA;   /* lightest cream                   */
  --inkt:           #14182A;   /* near-black ink (warmer than #000) */
  --inkt-zacht:     #3A3F55;   /* muted body ink                   */
  --inkt-vaag:      #6B6F82;   /* tertiary text                    */
  --krijt:          #D8CFB7;   /* chalk-line border on cream       */
  --krijt-2:        #B9AE91;

  /* ── SEMANTIC TOKENS ─────────────────────────────────────── */
  --bg:             var(--room);
  --bg-elevated:    var(--papier);
  --bg-sunk:        var(--room-diep);
  --bg-dark:        var(--nacht);

  --fg:             var(--inkt);
  --fg-1:           var(--inkt);
  --fg-2:           var(--inkt-zacht);
  --fg-3:           var(--inkt-vaag);
  --fg-on-dark:     var(--papier);
  --fg-on-yellow:   var(--mosterd-diep);

  --accent:         var(--kip-geel);
  --accent-ink:     var(--mosterd-diep);
  --danger:         var(--tomaat);
  --success:        var(--blad);
  --info:           var(--lucht);

  --border:         var(--krijt);
  --border-strong:  var(--krijt-2);
  --border-ink:     var(--inkt);

  /* ── TYPE FAMILIES ───────────────────────────────────────── */
  --font-display:   "Alfa Slab One", "Archivo Black", Georgia, serif;    /* brand wordmark, hero numerals */
  --font-headline:  "Archivo Black", "Alfa Slab One", system-ui, sans-serif; /* section headers */
  --font-hand:      "Caveat", "Bradley Hand", cursive;                   /* scrap notes, prices, accents */
  --font-body:      "DM Sans", system-ui, -apple-system, sans-serif;     /* UI + paragraph */
  --font-mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ── TYPE SCALE (rem; 1rem = 16px) ───────────────────────── */
  --fs-xs:    0.75rem;    /* 12 */
  --fs-sm:    0.875rem;   /* 14 */
  --fs-base:  1rem;       /* 16 */
  --fs-md:    1.125rem;   /* 18 */
  --fs-lg:    1.375rem;   /* 22 */
  --fs-xl:    1.75rem;    /* 28 */
  --fs-2xl:   2.25rem;    /* 36 */
  --fs-3xl:   3rem;       /* 48 */
  --fs-4xl:   4.25rem;    /* 68 — display hero */
  --fs-5xl:   6rem;       /* 96 — wordmark */

  /* ── SPACING (4-px base) ─────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── RADII ─ blocky with one chunky outer radius ─────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;       /* poll cards, big buttons */
  --r-pill: 999px;
  --r-blob: 60% 40% 55% 45% / 50% 60% 40% 50%;   /* the "scrap" blob */

  /* ── SHADOWS ─ hard offset shadow ("sticker / cardboard")── */
  --sh-sticker:    4px 4px 0 0 var(--inkt);             /* chunky offset */
  --sh-sticker-lg: 6px 6px 0 0 var(--inkt);
  --sh-sticker-yellow: 4px 4px 0 0 var(--mosterd-diep);
  --sh-soft:       0 2px 0 0 rgba(20,24,42,.12), 0 6px 18px -8px rgba(20,24,42,.18);
  --sh-card:       0 1px 0 0 rgba(20,24,42,.06), 0 8px 24px -16px rgba(20,24,42,.20);

  /* ── BORDERS ─ confident ink outlines ────────────────────── */
  --bd-thin:    1px solid var(--border);
  --bd-mid:     2px solid var(--border-strong);
  --bd-ink:     2px solid var(--inkt);
  --bd-ink-3:   3px solid var(--inkt);

  /* ── MOTION ─ snappy with a little bounce ────────────────── */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-bouncy: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ── Semantic element styles ─────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;          /* Bagel Fat One only ships 400 */
  font-size: var(--fs-4xl);
  line-height: .95;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h2, .h2 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1.05;
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-2);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.25;
  margin: 0 0 var(--sp-2);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-md);
  color: var(--fg-2);
  line-height: 1.5;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--korst);
}

.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--tomaat);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  color: var(--nacht);
  letter-spacing: -0.02em;
  line-height: .85;
}

small, .small { font-size: var(--fs-sm); color: var(--fg-3); }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--room-diep);
  border: var(--bd-thin);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  color: var(--nacht);
}

a {
  color: var(--nacht);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--kip-geel);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--tomaat); }

::selection { background: var(--kip-geel); color: var(--nacht); }