/* Shri Annam Platz — brand tokens.
 *
 * SINGLE SOURCE OF TRUTH for colour. Nothing in a design page should contain a raw
 * hex value; everything references one of these custom properties. Change a swatch
 * here and it changes across the whole site.
 *
 * Brand colours are sampled from the restaurant emblem (assets/img/logo.jpg).
 */

:root {
  /* --- Brand -------------------------------------------------------------
   * --sap-yellow is Dulux "Dandelion Yellow" (A205 / S16H8) — the house colour
   * for every button on the site.
   */
  --sap-yellow:        #FBD33D;
  --sap-yellow-dark:   #EDBF1C;   /* hover / pressed */
  --sap-red:           #8E1413;   /* emblem name-banner */
  --sap-teal:          #008061;   /* emblem scrollwork */
  --sap-blue:          #3C81C4;   /* emblem field */
  --sap-gold:          #D8A458;   /* emblem ring */

  /* --- Warm cream surfaces ---------------------------------------------- */
  --sap-cream:         #FBF4E6;   /* page background */
  --sap-cream-alt:     #F4E9D3;   /* alternating band */
  --sap-surface:       #FFFBF2;   /* cards */
  --sap-surface-2:     #F7EEDC;   /* inset cards */

  /* --- Ink --------------------------------------------------------------- */
  --sap-ink:           #2A1A12;   /* headings, button labels */
  --sap-body:          #55453A;   /* body copy */
  --sap-muted:         #8B7A68;   /* labels, dish descriptions */
  --sap-faint:         #B2A392;   /* dotted leaders, hairlines */
  --sap-line:          rgba(42, 26, 18, .14);
  --sap-line-strong:   rgba(42, 26, 18, .28);

  /* --- Diet markers ------------------------------------------------------ */
  --sap-veg:           #2E7D32;
  --sap-nonveg:        #C0552F;

  /* Solid white, for labels sitting on a brand colour. */
  --sap-on-brand:      #FFFFFF;

  /* Veil over photography, so white text on a food tile stays legible. */
  --sap-veil-mid:      rgba(20, 12, 7, .10);
  --sap-veil-deep:     rgba(20, 12, 7, .74);

  /* Pre-blended cream scrims, for browsers without color-mix() support.
     Keep these in step with --sap-cream. */
  --sap-scrim-strong:  rgba(251, 244, 230, .96);
  --sap-scrim-soft:    rgba(251, 244, 230, .60);

  /* Tints and elevation used by the richer layouts. */
  --sap-yellow-soft:   #FEF2C8;   /* pale wash of the house yellow */
  --sap-yellow-glow:   rgba(251, 211, 61, .45);
  --sap-red-soft:      #F6E2E0;
  --sap-shadow-lg:     0 34px 80px -30px rgba(42, 26, 18, .55);
  --sap-shadow-hover:  0 26px 60px -24px rgba(42, 26, 18, .5);

  /* --- Platform brand colours (Uber Eats / Just Eat tiles) --------------- */
  --sap-ubereats:      #06C167;
  --sap-justeat:       #FF8000;

  /* --- Type -------------------------------------------------------------- */
  --sap-font-display:  'Cormorant Garamond', Georgia, serif;
  --sap-font-body:     'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Geometry ---------------------------------------------------------- */
  --sap-radius-pill:   999px;
  --sap-radius-card:   16px;
  --sap-shadow:        0 18px 46px -22px rgba(42, 26, 18, .45);
  --sap-shadow-soft:   0 10px 28px -18px rgba(42, 26, 18, .38);
  --sap-maxw:          1180px;
  --sap-gutter:        48px;
}

/* ---------------------------------------------------------------------------
 * Buttons — every call to action on the site is one of these.
 * .sap-btn         primary, Dandelion Yellow
 * .sap-btn--ghost  outlined, for secondary actions
 * ------------------------------------------------------------------------ */

.sap-btn,
.sap-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--sap-radius-pill);
  font-family: var(--sap-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.sap-btn {
  background: var(--sap-yellow);
  color: var(--sap-ink);
}

.sap-btn:hover {
  background: var(--sap-yellow-dark);
  transform: translateY(-1px);
}

.sap-btn--ghost {
  background: transparent;
  color: var(--sap-ink);
  border-color: var(--sap-line-strong);
}

.sap-btn--ghost:hover {
  background: var(--sap-yellow);
  border-color: var(--sap-yellow);
  transform: translateY(-1px);
}

.sap-btn--sm {
  padding: 11px 20px;
  font-size: 13px;
}

.sap-btn:focus-visible,
.sap-btn--ghost:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--sap-yellow-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sap-btn,
  .sap-btn--ghost {
    transition: none;
  }
  .sap-btn:hover,
  .sap-btn--ghost:hover {
    transform: none;
  }
}