/* Desi Mojo website — shared tokens.
   Concept: the logo's own colours at full volume. White pages, chilli-red blocks and buttons, Desi Mojo yellow discs behind
   every dish (the yellow circle of the logo). Big condensed Bebas Neue for names and prices, Poppins for everything else. */
@font-face { font-family: "Bebas Neue"; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(fonts/poppins-600.woff2) format("woff2"); }

:root {
  --bg: #ffffff;
  --bg-2: #fff6df;          /* butter: the printed menu's paper */
  --bg-3: #efe3cc;
  --ink: #1b1310;
  --muted: #6d5d4d;
  --red: #e02a1f;           /* Desi Mojo chilli red (logo) */
  --red-deep: #b51d14;
  --on-red: #ffffff;
  --yellow: #ffc21a;        /* Desi Mojo yellow (logo) */
  --yellow-ink: #2a1d05;
  --leaf: #2f8f4e;
  --line: rgb(27 19 16 / .12);
  --serif: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;   /* display face */
  --sans: "Poppins", "Segoe UI", Roboto, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; font-synthesis: none; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--red); color: var(--on-red); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* primary action: the only filled turmeric element on any screen */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--red); color: var(--on-red); font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgb(224 42 31 / .45); text-transform: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cta:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgb(224 42 31 / .6); }
.cta:active { transform: translateY(1px) scale(.98); }
.cta[disabled] { opacity: .5; cursor: not-allowed; }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; }
.ghost:hover { border-color: var(--ink); }
.ghost.on-red { color: #fff; border-color: rgb(255 255 255 / .6); } .ghost.on-red:hover { border-color: #fff; background: rgb(255 255 255 / .1); }

/* price: numerals large, currency small (see docs/NEUROSCIENCE.md) */
.price { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.price small { font: 500 .62em/1 var(--sans); color: var(--muted); margin-right: .25em; letter-spacing: .02em; }

/* the plate: every dish sits on a white ceramic plate over a Desi Mojo yellow disc */
.plate { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #fbf8f2 55%, #ece4d6 69%, #ffffff 71%, #f1eadf 86%, #e3d8c6 100%);
  box-shadow: 0 0 0 clamp(10px, 2.2vw, 26px) var(--yellow), 0 34px 60px -24px rgb(90 30 10 / .45); }
.plate img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 16px 18px rgb(60 25 10 / .35)); }
.plate.styled { background: #fff; }
.plate img.ai { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: none; mix-blend-mode: multiply; }
.plate img.crop { inset: 15%; width: 70%; height: 70%; object-fit: cover; border-radius: 50%; filter: none; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 14px 26px rgb(60 25 10 / .3); }
.price small { color: inherit; opacity: .7; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* on red sections the primary button turns yellow */
.on-red .cta, .cta.yellow { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .35); }
.on-red .cta:hover, .cta.yellow:hover { background: #ffd24f; }