src/app.css

:root{
  --brand-bg: #191f70;
  --brand-pink: #df4085;
  --brand-white: #ffffff;

  --font-serif: "Bodoni Moda", "Bodoni", "Didot", serif;
  --font-sans: "Avenir Next", "Avenir", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --card-radius: 24px;
  --shadow: 0 8px 24px rgba(0,0,0,.15);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--brand-white);
  color: #0c0c21;
  font-family: var(--font-sans);
}

.container { max-width: 1060px; margin: 0 auto; padding: clamp(16px, 3vw, 32px); }

.h1 {
  font-family: var(--font-serif);
  font-weight: 400;             /* not bold */
  color: var(--brand-bg);       /* blue title */
  line-height: 1.1;
  /* kerning / tracking */
  font-kerning: normal;         /* use font’s kerning pairs */
  letter-spacing: -0.01em;      /* slightly tighter tracking */
  font-size: clamp(28px, 4.2vw, 56px);
  margin: 12px 0 20px;
}

.subtitle {
  margin-top: -6px;
  margin-bottom: 16px;
  color: #4a4f93;
  font-size: 14px;
}
.subtitle a {
  color: #191f70;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(25,31,112,.25);
}
.subtitle a:hover { border-bottom-color: rgba(25,31,112,.5); }


.card {
  background: var(--brand-white);
  color: #0c0c21;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.6vw, 28px);
}

.tooltip {
  position: absolute; pointer-events: none;
  background: #fff; color: #111125;
  padding: 8px 10px; border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  font-size: 12px; max-width: 240px;
  border: 1px solid rgba(0,0,0,.05);
}

/* responsive image sizing: desktop big, mobile smaller */
.figure {
  display:flex; align-items:center; gap:16px; margin-bottom:8px; color:#111; font-weight:700;
}
.figure img.resp {
  height: 160px; width: auto;   /* desktop size */
}
@media (max-width: 640px) {     /* mobile: shrink */
  .figure img.resp { height: 96px; }
}

/* Food switcher buttons */
.switcher {
  display: flex;
  gap: 10px;
  margin: 16px 0 12px;
}
.switcher button {
  border: 1px solid #ccd1ff;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--brand-white);
  color: var(--brand-bg);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.switcher button:hover { box-shadow: 0 0 0 2px rgba(185,192,255,.7) inset; }
.switcher button:active { transform: translateY(1px); }
.switcher button.selected,
.switcher button[aria-selected="true"] {
  background: #e6e9ff;
  box-shadow: 0 0 0 2px #b9c0ff inset;
}
/* Image switcher buttons */
.switcher.imgs {
  display: flex;
  gap: 12px;
  margin: 16px 0 12px;
}
.imgbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ccd1ff;
  background: var(--brand-white);
  color: var(--brand-bg);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
}
.imgbtn img {
  height: 28px;
  width: auto;
  display: block;
}
.imgbtn:hover { box-shadow: 0 0 0 2px rgba(185,192,255,.7) inset; }
.imgbtn:active { transform: translateY(1px); }
.imgbtn.selected,
.imgbtn[aria-selected="true"] {
  background: #e6e9ff;
  box-shadow: 0 0 0 2px #b9c0ff inset;
}