/* Shared restaurant identity, loaded after the desktop and mobile layouts. */
:root {
  --bg: #080a09;
  --surface: #111713;
  --surface-2: #1a241e;
  --text: #f5f7f5;
  --cream: #f5f7f5;
  --muted: #a8b5ac;
  --green: #38d47b;
  --green-hover: #60e497;
  --green-light: #83e7ac;
  --green-soft: #142e20;
  --green-border: #376548;
  --on-green: #07180d;
  --red: #ed4b46;
  --brand-red: #ff5954;
  --hot: var(--green-light);
  --line: #ffffff17;
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  color-scheme: dark;
}

body, .menu, .discovery, .menu-browse, .category-navigation {
  background-color: var(--bg);
}
.site-header {
  background: #080a09f5;
  border-bottom: 1px solid var(--line);
}
.mobile-navigation, dialog, .dialog-head, .app-tabs {
  background: var(--surface);
}
footer { background: #060807; }
.demo { background: #102319; color: #a7cfb7; }
.brand b { color: var(--green); }
.brand-accent, .hero h1 > .brand-accent, .card-top .brand-accent {
  color: var(--brand-red);
}

.primary, .dark, .add, .mobile-cart, .location-button,
.switch button.selected, .stamps > .stamped,
.loyalty-progress .stamped {
  background: var(--green);
  color: var(--on-green);
}
.primary, .dark, .add, .location-button { border-color: transparent; }
.primary:hover, .dark:hover, .add:hover, .location-button:hover {
  background: var(--green-hover);
}
.primary:disabled, .dark:disabled, .add:disabled {
  background: var(--surface-2);
  color: var(--muted);
}
.dark > span, .mobile-cart b { background: #07180d18; }
#app-cart-count { background: var(--red); color: white; }
.skip { background: var(--green); color: var(--on-green); }
.slide-controls button[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
}
.contact-button, .floating-contact { background: #102018; }
.contact-button {
  color: var(--green-light);
  border-color: var(--green-border);
}
.contact-button:hover { background: var(--green-soft); }
.search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #38d47b18;
}
.quick-groups button[aria-pressed="true"] {
  background: var(--green-soft);
  border-color: var(--green-border);
  color: var(--green-light);
}
.categories button { position: relative; }
.categories button.active { border-bottom-color: transparent; }
.categories button::after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: center;
}
.categories button.active::after { transform: scaleX(1); }
.product, .discovery-item, .contact-card {
  box-shadow: 0 6px 20px #00000014;
}
.product-bottom > span { color: var(--green-light); }
.product-image { background: var(--surface-2); }
.product-label { background: #080a09e6; }
.loyalty { background: #0c1911; border-color: #38d47b1c; }
.loyalty-card {
  background: linear-gradient(145deg, #163523, #101914 75%);
  border-color: var(--green-border);
  box-shadow: 0 16px 40px #00000026;
}
.card-top > small { color: var(--green-light); }
.stamps > *, .loyalty-progress > span { border-color: var(--green-border); }
.stamps > .stamped, .loyalty-progress .stamped { border-color: var(--green); }
.manage-tabs .selected {
  background: var(--green-soft);
  border-color: var(--green-border);
  color: var(--green-light);
}
.loyalty-panel, .orders-monitor { background: var(--surface); }

/* One short movement per interaction; never an ongoing decorative loop. */
@media (prefers-reduced-motion: no-preference) {
  .primary, .dark, .add, .contact-button, .location-button, .menu-toggle,
  .switch button, .quick-groups button, .categories button, .app-tabs > *,
  .slide-controls button, .quantity button, .small-button, #close {
    transition: background-color .2s, color .2s, border-color .2s,
      box-shadow .2s, transform .22s var(--ease-out);
  }
  .categories button::after { transition: transform .24s var(--ease-out); }
  .search { transition: border-color .2s, box-shadow .2s; }
  .primary:active, .dark:active, .add:active, .contact-button:active,
  .location-button:active, .menu-toggle:active, .quantity button:active {
    transform: scale(.96);
  }
  .hero-copy { animation: brand-rise .55s var(--ease-out) both; }
  .hero-art { animation: brand-rise .65s .08s var(--ease-out) both; }
  .product {
    animation: brand-rise .34s var(--ease-out) both;
    transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
  }
  .product:nth-child(2) { animation-delay: .035s; }
  .product:nth-child(3) { animation-delay: .07s; }
  .product:nth-child(4) { animation-delay: .105s; }
  .product:nth-child(5) { animation-delay: .14s; }
  .product:nth-child(6) { animation-delay: .175s; }
  .discovery-item { transition: transform .28s var(--ease-out), box-shadow .28s; }
  .product-image img, .discovery-item img { transition: transform .45s var(--ease-out); }
  .reveal.revealed { animation: brand-rise .5s var(--ease-out) both; }
  .mobile-navigation:not([hidden]) { animation: brand-rise .22s var(--ease-out); }
  dialog[open] { animation: brand-panel-in .26s var(--ease-out); }
  dialog::backdrop { animation: brand-fade-in .2s ease-out; }
  .food-enter { animation: brand-photo-in .42s var(--ease-out); }
  .app-tabs [aria-current="page"] > svg,
  .app-tabs [aria-current="page"] > .tab-cart-icon {
    animation: brand-tab-in .3s var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .product:hover {
      transform: translateY(-3px);
      border-color: var(--green-border);
      box-shadow: 0 12px 28px #00000038;
    }
    .discovery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px #00000038; }
    .product:hover .product-image img, .discovery-item:hover img { transform: scale(1.045); }
    .primary:hover, .dark:hover, .location-button:hover { transform: translateY(-2px); }
  }
  @media (max-width: 760px) {
    body.app-ready[data-app-view="fidelite"] #fidelite,
    body.app-ready[data-app-view="contact"] #contact,
    body.app-ready[data-app-view="carte"] #category-panel {
      animation: brand-rise .28s var(--ease-out);
    }
  }
}

@keyframes brand-rise {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes brand-panel-in {
  from { opacity: 0; transform: translateY(16px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes brand-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes brand-photo-in {
  from { opacity: .6; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes brand-tab-in {
  from { transform: translateY(3px) scale(.9); }
  to { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal, .revealed, .product { opacity: 1; translate: none; }
}