/*
  V-4 WiWiStore visual language unification.
  Scope: public product pages, demos, reservation page, smart menu, Vendor
  Console, and WiWi Console. This layer intentionally avoids behavior changes.
*/
:root {
  --v4-ink: #15110f;
  --v4-ink-2: #2d2620;
  --v4-night: #080b0f;
  --v4-night-2: #13181d;
  --v4-panel: rgba(16, 18, 20, 0.9);
  --v4-paper: #fffaf1;
  --v4-cream: #f3e6d1;
  --v4-muted: #8a7866;
  --v4-muted-dark: #cbbca8;
  --v4-gold: #d8a85f;
  --v4-gold-2: #f4d28a;
  --v4-jade: #4f9d7f;
  --v4-blue: #6fa7d2;
  --v4-red: #d66355;
  --v4-line: rgba(216, 168, 95, 0.28);
  --v4-line-dark: rgba(255, 255, 255, 0.14);
  --v4-shadow: 0 24px 72px rgba(0, 0, 0, 0.22);
  --v4-shadow-soft: 0 12px 34px rgba(34, 22, 12, 0.12);
  --v4-radius: 8px;
  --v4-font-sans: "Noto Sans TC", "Microsoft JhengHei UI", system-ui, sans-serif;
  --v4-font-serif: "Noto Serif TC", "Noto Sans TC", serif;
}

body.v4-unified {
  font-family: var(--v4-font-sans);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.v4-unified h1,
body.v4-unified h2 {
  letter-spacing: 0;
  text-wrap: balance;
}

body.v4-unified p,
body.v4-unified li,
body.v4-unified small {
  letter-spacing: 0;
}

body.v4-unified a:focus-visible,
body.v4-unified button:focus-visible,
body.v4-unified input:focus-visible,
body.v4-unified select:focus-visible,
body.v4-unified textarea:focus-visible {
  outline: 3px solid rgba(244, 210, 138, 0.85);
  outline-offset: 3px;
}

/* Public marketing and demo pages */
body.v4-landing,
body.v4-demo-page,
body.v4-restaurant-demo,
body.v4-smart-menu-public,
body.v4-reservation-public {
  color: var(--v4-ink);
  background:
    linear-gradient(135deg, rgba(8, 11, 15, 0.03), transparent 38%),
    linear-gradient(180deg, #fffaf1 0%, #f7efe2 52%, #efe1cc 100%);
}

body.v4-landing .home-nav,
body.v4-demo-page .nav,
body.v4-demo-page .topbar,
body.v4-restaurant-demo .site-header,
body.v4-smart-menu-public .menu-shell > .hero,
body.v4-reservation-public .topbar {
  border-color: rgba(216, 168, 95, 0.22);
}

body.v4-landing .home-nav,
body.v4-demo-page .nav,
body.v4-restaurant-demo .site-header,
body.v4-reservation-public .topbar {
  background: rgba(10, 12, 14, 0.86);
  color: var(--v4-paper);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

body.v4-landing .home-brand small,
body.v4-demo-page .brand small,
body.v4-restaurant-demo .brand small,
body.v4-reservation-public .brand small,
body.v4-landing .home-links,
body.v4-demo-page .nav-links,
body.v4-restaurant-demo .top-nav a,
body.v4-reservation-public .top-actions button {
  color: rgba(255, 250, 241, 0.74);
}

body.v4-demo-page .brand img,
body.v4-reservation-public .brand img {
  background: linear-gradient(145deg, #080b0f, #17120f 64%, #2d2016);
  border: 1px solid rgba(244, 210, 138, 0.34);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

body.v4-unified .home-eyebrow,
body.v4-unified .eyebrow,
body.v4-unified .section-kicker {
  color: #b97d2e;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

body.v4-landing .home-hero h1,
body.v4-demo-page .hero h1,
body.v4-demo-page .hero-panel h1,
body.v4-restaurant-demo .hero h1,
body.v4-reservation-public .hero-panel h1,
body.v4-smart-menu-public .hero h1 {
  font-family: var(--v4-font-serif);
  font-weight: 900;
}

body.v4-demo-page .hero,
body.v4-demo-page .hero-panel,
body.v4-restaurant-demo .hero,
body.v4-reservation-public .hero-panel {
  border-radius: var(--v4-radius);
  border: 1px solid rgba(216, 168, 95, 0.26);
  box-shadow: var(--v4-shadow);
}

body.v4-demo-page .hero,
body.v4-demo-page .hero-panel,
body.v4-reservation-public .hero-panel {
  color: var(--v4-paper);
  background:
    linear-gradient(90deg, rgba(8, 11, 15, 0.98), rgba(18, 20, 22, 0.76)),
    var(--v4-night);
}

body.v4-reservation-public .hero-copy,
body.v4-reservation-public .hero-visual,
body.v4-reservation-public .workspace,
body.v4-demo-page .compact-entry-card,
body.v4-demo-page .profit-architecture-card,
body.v4-restaurant-demo .value-card,
body.v4-smart-menu-public .panel,
body.v4-smart-menu-public .menu-card,
body.v4-smart-menu-public .draft-card {
  border-radius: var(--v4-radius);
  border-color: rgba(216, 168, 95, 0.28);
  box-shadow: var(--v4-shadow-soft);
}

body.v4-reservation-public .workspace,
body.v4-smart-menu-public .menu-card,
body.v4-smart-menu-public .draft-card,
body.v4-smart-menu-public .panel {
  background: rgba(255, 250, 241, 0.94);
}

body.v4-demo-page .button.primary,
body.v4-demo-page .primary,
body.v4-reservation-public .primary,
body.v4-restaurant-demo .button.primary,
body.v4-smart-menu-public .primary-button,
body.v4-smart-menu-public .language-row button.active,
body.v4-smart-menu-public .tag-button.active,
body.v4-smart-menu-public .option-button.active {
  min-height: 52px;
  border-radius: var(--v4-radius);
  color: #1d130d;
  background: linear-gradient(135deg, var(--v4-gold-2), var(--v4-gold));
  box-shadow: 0 16px 36px rgba(216, 168, 95, 0.22);
}

body.v4-demo-page .ghost,
body.v4-reservation-public .ghost,
body.v4-restaurant-demo .button.secondary,
body.v4-smart-menu-public .language-row button,
body.v4-smart-menu-public .tag-button,
body.v4-smart-menu-public .option-button {
  min-height: 48px;
  border-radius: var(--v4-radius);
  border: 1px solid rgba(216, 168, 95, 0.28);
}

body.v4-reservation-public .top-actions button,
body.v4-reservation-public .tabs button,
body.v4-reservation-public .segmented button {
  border-radius: var(--v4-radius);
  color: var(--v4-paper);
  background: rgba(255, 255, 255, 0.08);
}

body.v4-reservation-public .tabs button.is-active,
body.v4-reservation-public .segmented button.is-active {
  color: #19110c;
  background: linear-gradient(135deg, var(--v4-gold-2), var(--v4-gold));
}

body.v4-reservation-public .staff-overview,
body.v4-reservation-public .owner-todo,
body.v4-reservation-public .board-stats,
body.v4-reservation-public .entry-card,
body.v4-reservation-public .analysis-card,
body.v4-reservation-public .reason-dialog,
body.v4-reservation-public .staff-toolbar {
  border-radius: var(--v4-radius);
  border-color: rgba(216, 168, 95, 0.28);
}

body.v4-reservation-public .entry-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(13, 15, 17, 0.92);
}

body.v4-reservation-public .entry-title h3,
body.v4-reservation-public .panel-head h2,
body.v4-reservation-public .board-stat-title,
body.v4-reservation-public .ticket-result strong {
  color: var(--v4-paper);
}

body.v4-reservation-public .entry-actions .action-seat {
  color: #07140e;
  background: linear-gradient(135deg, #8de5be, var(--v4-jade));
}

body.v4-reservation-public .entry-actions .action-noshow,
body.v4-reservation-public .entry-actions .danger {
  color: var(--v4-paper);
  background: linear-gradient(135deg, #e58373, var(--v4-red));
}

body.v4-reservation-public .wait-badge.is-long,
body.v4-reservation-public .board-alert:not(.is-calm) {
  color: #fff8ee;
  background: linear-gradient(135deg, #b73934, #e78b55);
}

body.v4-smart-menu-public .menu-shell {
  width: min(1180px, calc(100% - 32px));
}

body.v4-smart-menu-public .hero {
  align-items: center;
  min-height: 360px;
  padding: 44px;
  border-radius: var(--v4-radius);
  border: 1px solid rgba(216, 168, 95, 0.24);
  color: var(--v4-paper);
  background:
    linear-gradient(90deg, rgba(8, 11, 15, 0.96), rgba(8, 11, 15, 0.58)),
    url("https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1600&q=82") center / cover no-repeat;
  box-shadow: var(--v4-shadow);
}

body.v4-smart-menu-public .lead {
  color: rgba(255, 250, 241, 0.78);
}

body.v4-smart-menu-public .status-card {
  border-radius: var(--v4-radius);
  border-color: rgba(216, 168, 95, 0.28);
  background: rgba(255, 250, 241, 0.92);
}

/* Console surfaces */
body.v4-console-shell {
  background:
    linear-gradient(135deg, rgba(216, 168, 95, 0.08), transparent 38%),
    linear-gradient(180deg, #0a0c10 0%, #171013 100%);
}

body.v4-console-shell .panel,
body.v4-console-shell .metric,
body.v4-console-shell .action-card,
body.v4-console-shell .workbench-hero,
body.v4-console-shell .copilot-panel,
body.v4-console-shell .console-card,
body.v4-console-shell .dashboard-card,
body.v4-console-shell .staff-action-card,
body.v4-console-shell .staff-mini-card,
body.v4-console-shell .staff-preset-card,
body.v4-console-shell .staff-returned-card,
body.v4-console-shell .reservation-entry-card,
body.v4-console-shell .reservation-summary-stat,
body.v4-console-shell .reservation-ops-metric {
  border-radius: var(--v4-radius);
  border-color: rgba(216, 168, 95, 0.26);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

body.v4-console-shell .primary,
body.v4-console-shell .small-button,
body.v4-console-shell .action-card,
body.v4-console-shell .reservation-main-action {
  border-radius: var(--v4-radius);
}

body.v4-console-shell .primary,
body.v4-console-shell .reservation-main-action {
  color: #1d130d;
  background: linear-gradient(135deg, var(--v4-gold-2), var(--v4-gold));
}

body.v4-console-shell .workbench-hero h2,
body.v4-console-shell .panel-head h2,
body.v4-console-shell h1,
body.v4-console-shell h2 {
  letter-spacing: 0;
  text-wrap: balance;
}

body.v4-console-shell .metric strong,
body.v4-console-shell .reservation-summary-stat strong,
body.v4-console-shell .reservation-ops-metric strong {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  body.v4-demo-page .hero,
  body.v4-demo-page .hero-panel,
  body.v4-reservation-public .hero-panel,
  body.v4-smart-menu-public .hero {
    padding: 26px;
  }

  body.v4-landing .home-nav,
  body.v4-demo-page .nav,
  body.v4-restaurant-demo .site-header,
  body.v4-reservation-public .topbar {
    position: sticky;
    align-items: stretch;
  }

  body.v4-reservation-public .entry-actions button,
  body.v4-reservation-public .reason-options button,
  body.v4-smart-menu-public .primary-button {
    min-height: 56px;
    font-size: 1rem;
  }
}