/* ============================================================
   site.css — שכבת מותג ל-Cafe Tiran (navy/coral + dark mode)
   נטענת אחרי tokens/base/components ודורסת אותם.
   ============================================================ */
:root {
  --bg: #FBF5EC;
  --ink: #15233F;
  --primary: #1B2A4A;
  --accent: #E98A6B;        /* coral */
  --accent-2: #F2B705;      /* sunny */
  --muted: #6E7488;
  --line: rgba(21, 35, 63, 0.12);
  --card: #FFFFFF;
  --font-head: "Heebo", system-ui, sans-serif;
  --font-body: "Assistant", system-ui, sans-serif;
  --radius: 16px;
}
html[data-theme="dark"] {
  --bg: #0E1626;
  --ink: #ECE6DA;
  --primary: #E98A6B;
  --accent: #E98A6B;
  --muted: #97A0B5;
  --line: rgba(255, 255, 255, 0.14);
  --card: rgba(255, 255, 255, 0.05);
}
html { transition: background .3s, color .3s; }

/* Header / brand */
.brand__logo { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.brand__name { font-weight: 900; }
.theme-toggle {
  margin-inline-start: auto; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.site-header .btn--order { margin-inline-start: 0; }

/* HERO — cinematic video */
.hero { position: relative; min-height: 90vh; display: grid; place-items: center; overflow: hidden; padding: 0;
  background: linear-gradient(135deg, #1B2A4A, #0E1626); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,22,38,.45) 0%, rgba(14,22,38,.72) 60%, rgba(14,22,38,.9) 100%); }
.hero__inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 var(--space-3); max-width: 820px; }
.hero__eyebrow { color: var(--accent-2); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: .8rem; }
.hero__title { color: #fff; font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 900; margin: .5rem 0 1rem; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.hero__lead { color: rgba(255,255,255,.92); font-size: 1.15rem; max-width: 60ch; margin-inline: auto; }
.hero .hero__cta { justify-content: center; margin: var(--space-3) 0 var(--space-2); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.hero__scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff;
  font-size: 2rem; line-height: 1; opacity: .8; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* Social buttons */
.socials { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: var(--space-3); }
.social-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff;
  transition: transform .15s, background .15s, color .15s; }
.social-btn:hover { transform: translateY(-3px); background: var(--accent); border-color: var(--accent); color: #fff; }
.social-btn svg { width: 22px; height: 22px; }
.socials--ink .social-btn { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--line); color: var(--primary); }
html[data-theme="dark"] .socials--ink .social-btn { color: var(--ink); }
.socials--ink .social-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Section eyebrow */
.section__eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .04em; margin-bottom: .25rem; }

/* Menu — glassmorphism dishes */
.dish { background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dish__add { background: var(--primary); }
html[data-theme="dark"] .dish__add { color: #0E1626; }
.dish.is-hidden { display: none; }
.menu__section-title { color: var(--ink); position: relative; padding-inline-start: .8rem; }
.menu__section-title::before { content: ""; position: absolute; inset-inline-start: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 3px; background: var(--accent); }

/* Filters */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--space-3); }
.chip { padding: .45rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-family: var(--font-head); font-weight: 700; font-size: .9rem; transition: all .15s; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
html[data-theme="dark"] .chip[aria-pressed="true"] { color: #0E1626; }

/* Gallery + lightbox */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.gallery__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.07); }
.gallery__hint code { background: color-mix(in srgb, var(--primary) 8%, transparent); padding: .1rem .4rem; border-radius: 6px; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8,12,22,.92); display: grid; place-items: center; padding: 1rem; }
.lightbox img { max-width: 96vw; max-height: 90vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 16px; inset-inline-end: 20px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); text-align: center; }
.stats li { background: color-mix(in srgb, var(--card) 78%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) .5rem; }
.stats strong { display: block; font-family: var(--font-head); font-size: 1.15rem; color: var(--accent); }
.stats span { font-size: .82rem; color: var(--muted); }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } .hero__scroll { animation: none; } }

@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}