/*
 * Casa Pizza shared design system — Phase 1
 * Loaded after legacy page CSS to provide one consistent visual foundation.
 */
:root {
  color-scheme: light;
  --cp-cream: #f7f3ea;
  --cp-surface: #ffffff;
  --cp-surface-soft: #fbf8f1;
  --cp-navy: #0b2f57;
  --cp-navy-strong: #071f3d;
  --cp-red: #d92d20;
  --cp-red-dark: #b92319;
  --cp-yellow: #f4c93d;
  --cp-text: #17263a;
  --cp-text-strong: #091b32;
  --cp-muted: #64748b;
  --cp-border: #d8dee7;
  --cp-border-strong: #bcc6d2;
  --cp-success: #287a54;
  --cp-danger: #b42318;
  --cp-focus: #f0b90b;
  --cp-page-max: 1220px;
  --cp-header-height: 76px;
  --cp-section-space: 80px;
  --cp-section-space-tight: 48px;
  --cp-card-radius: 16px;
  --cp-control-radius: 12px;
  --cp-breakpoint-tablet: 980px;
  --cp-breakpoint-mobile: 680px;

  /* Legacy aliases retained so connected pages keep working. */
  --bg: var(--cp-cream);
  --cream: var(--cp-cream);
  --paper: var(--cp-surface);
  --surface: var(--cp-surface);
  --surface-soft: var(--cp-surface-soft);
  --surface-blue: #eef3f8;
  --surface-navy: var(--cp-navy);
  --ink: var(--cp-text);
  --ink-strong: var(--cp-text-strong);
  --muted: var(--cp-muted);
  --line: var(--cp-border);
  --blue: var(--cp-navy);
  --blue-dark: var(--cp-navy-strong);
  --blue-soft: #eef3f8;
  --navy: var(--cp-navy);
  --red: var(--cp-red);
  --red-dark: var(--cp-red-dark);
  --red-soft: #fce9e6;
  --yellow: var(--cp-yellow);
  --yellow-soft: #fff6d5;
  --green: var(--cp-success);
  --green-soft: #e9f5ee;
  --danger: var(--cp-danger);
  --focus: var(--cp-focus);
  --orange: var(--cp-red);
  --radius: var(--cp-card-radius);
  --radius-sm: var(--cp-control-radius);
  --max: var(--cp-page-max);
  --header-h: var(--cp-header-height);
  --header-height: var(--cp-header-height);
  --sidebar: 224px;
  --shadow: none;
}

html {
  scroll-behavior: auto !important;
  background: var(--cp-cream);
}

body {
  background: var(--cp-cream);
  color: var(--cp-text);
}

:focus-visible {
  outline: 3px solid var(--cp-focus) !important;
  outline-offset: 3px !important;
}

:is(button, input, select, textarea, a)[aria-disabled="true"],
:is(button, input, select, textarea):disabled {
  cursor: not-allowed !important;
  opacity: .5 !important;
  transform: none !important;
}

.container { width: min(calc(100% - 32px), var(--cp-page-max)); }
.section { padding-block: var(--cp-section-space); }
.section-tight { padding-block: var(--cp-section-space-tight); }

/* Shared surfaces */
.card,
.panel,
.product-card,
.review-card,
.contact-card,
.finance-card,
.finance-kpi,
.cashier-summary-metrics article,
.home-combo-card,
.menu-combo-main,
.combo-dialog,
.quick-view-dialog,
.cash-sale-dialog {
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-card-radius) !important;
  box-shadow:none;
}

/* Shared buttons */
.button,
.button.primary,
.button.secondary,
.button.cashier,
.button.danger,
.service-header-button,
.order-status-trigger,
.menu-toggle,
.icon-button,
.room-action,
.cash-sale-close,
.combo-dialog-close,
.dialog-close,
.home-showcase-arrow,
.menu-slideshow__control,
.card-icon-button {
  min-height: 44px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-control-radius);
  box-shadow:none;
  filter: none !important;
  font-weight: 800;
  transform: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button,
.button.secondary,
.service-header-button,
.menu-toggle,
.icon-button,
.room-action,
.card-icon-button,
.dialog-close,
.combo-dialog-close,
.cash-sale-close,
.menu-slideshow__control,
.home-showcase-arrow {
  background: var(--cp-surface);
  border-color: var(--cp-border);
  color: var(--cp-navy);
}

.button:hover,
.button.secondary:hover,
.service-header-button:hover,
.menu-toggle:hover,
.icon-button:hover,
.room-action:hover,
.card-icon-button:hover,
.dialog-close:hover,
.combo-dialog-close:hover,
.cash-sale-close:hover,
.menu-slideshow__control:hover,
.home-showcase-arrow:hover {
  background: var(--cp-surface-soft);
  border-color: var(--cp-border-strong);
  color: var(--cp-navy-strong);
  transform: none !important;
}

.button-primary,
.button.primary,
.service-header-button--bill {
  background: var(--cp-red) !important;
  border-color: var(--cp-red) !important;
  color: #fff !important;
}
.button-primary:hover,
.button.primary:hover,
.service-header-button--bill:hover {
  background: var(--cp-red-dark) !important;
  border-color: var(--cp-red-dark) !important;
}
.button-blue,
.button.cashier,
.navy-action {
  background: var(--cp-navy) !important;
  border-color: var(--cp-navy) !important;
  color: #fff !important;
}
.button-danger,
.button.danger,
.danger-icon {
  background: var(--cp-surface) !important;
  border-color: #e5aaa5 !important;
  color: var(--cp-danger) !important;
}
.button-yellow { background: var(--cp-yellow) !important; border-color: var(--cp-yellow) !important; color: var(--cp-navy-strong) !important; }

/* Header and navigation */
.site-header {
  height: var(--cp-header-height);
  background: #fff !important;
  border-bottom: 1px solid var(--cp-border) !important;
  backdrop-filter:none;
  box-shadow:none;
}
.brand-logo { object-fit: contain; }
.primary-nav a { border-radius: 10px; }
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { background: #eef3f8 !important; color: var(--cp-navy-strong) !important; }
.cart-button {
  min-height: 44px;
  border: 1px solid var(--cp-navy);
  border-radius: var(--cp-control-radius) !important;
  background: var(--cp-navy) !important;
  box-shadow:none;
}
.menu-toggle { min-width: 74px; padding-inline: 12px; font-size: .82rem !important; }

/* Product media foundation */
.product-media,
.product-media.product-card-photo,
.product-detail-media,
.cart-item-image,
.pairing-media,
.quick-view-media,
.category-photo-wrap,
.cash-sale-product img,
.cash-sale-item img {
  background: #fff !important;
  border-color: var(--cp-border) !important;
  box-shadow:none;
}
.product-media::before,
.product-media.product-card-photo::before { display: none !important; }
.product-media img,
.product-media.product-card-photo img,
.product-detail-media img,
.cart-item-image img,
.pairing-media img,
.quick-view-media img,
.category-photo-wrap img,
.combo-collage img,
.menu-combo-collage img,
.combo-dialog-collage img,
.promo-art img,
.story-panel img,
.home-showcase-food {
  object-fit: contain !important;
  filter: none !important;
  box-shadow:none;
}
.product-media img,
.product-detail-media img,
.combo-collage img,
.menu-combo-collage img,
.combo-dialog-collage img,
.promo-art img {
  border-radius: 0 !important;
}

/* Pricing */
.price-wrap { gap: 4px; }
.price-old,
.price-old-highlight,
.product-price-old,
.menu-combo-prices del,
.combo-dialog-price del,
.home-combo-footer del {
  color: #6e7b8d !important;
  text-decoration-line: line-through !important;
  text-decoration-color: var(--cp-red) !important;
  text-decoration-thickness: 2px !important;
}
.price-current,
.product-price-current,
.menu-combo-prices strong,
.combo-dialog-price strong,
.home-combo-footer strong {
  color: var(--cp-red) !important;
  font-weight: 900 !important;
}
.tag-red,
.discount-badge,
.home-combo-discount,
.combo-dialog-badge {
  background: var(--cp-red) !important;
  color: #fff !important;
  box-shadow:none;
}

/* Remove decorative or broken treatments while preserving layout. */
.card-icon-button:empty,
.icon-button:empty { display: none !important; }
.status-dot,
.order-status-dot,
.online i,
.dot { box-shadow:none; }

.card-icon-actions {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
.card-icon-button {
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  font-size: .72rem !important;
}
.card-icon-button.active { background: #eef3f8 !important; color: var(--cp-navy-strong) !important; }
.product-editor-favorite { width: auto !important; padding-inline: 12px !important; }

/* Flat, controlled section backgrounds; no glows or artificial depth. */
.hero,
.today-combos-section,
.home-showcase-card,
.quick-info-grid,
.product-media,
.product-detail-media,
.cart-item-image,
.promo-shell,
.home-combo-art,
.menu-combo-visual,
.combo-dialog-art,
.menu-slideshow,
.cash-sale-catalog,
.finance-chart {
  box-shadow:none;
  filter: none !important;
}
.hero,
.today-combos-section,
.menu-slideshow,
.cash-sale-catalog { background: var(--cp-surface-soft) !important; }
.home-combo-art,
.menu-combo-visual,
.combo-dialog-art { background: var(--cp-navy) !important; }
.quick-info-grid { background: #fff !important; }
.home-showcase-orbit,
.hero::before,
.hero-plate::before,
.hero-plate::after { display: none !important; }
.home-showcase-rating,
.home-showcase-offer,
.quick-info-grid,
.promo-shell { box-shadow:none; }

/* Dialog controls use readable text during the temporary icon phase. */
.dialog-close,
.combo-dialog-close,
.cash-sale-close,
.order-status-panel-head button {
  width: auto !important;
  min-width: 62px;
  padding-inline: 10px !important;
  font-size: .75rem !important;
  border-radius: 10px !important;
}
.order-status-trigger { width: auto !important; padding-inline: 12px !important; font-size: .75rem; }
.order-status-panel { background: #fff !important; backdrop-filter:none; box-shadow:none; }
.design-system-toast { box-shadow:none; }

/* Admin action labels */
.room-picker .room-action { min-height: 40px; padding-inline: 10px; font-size: .75rem; }
.admin-modal-backdrop { backdrop-filter:none; }
.cash-sale-product > b { min-width: 42px; width: auto !important; padding-inline: 7px; border-radius: 8px !important; }

/* Footer: text-only brand, no repeated image logo. */
.site-footer { box-shadow:none; }
.site-footer .brand-logo { display: none !important; }
.site-footer .brand { gap: 0; }

/* Back navigation should not animate the document. */
html:focus-within { scroll-behavior: auto !important; }

@media (max-width: 980px) {
  :root { --cp-section-space: 64px; --cp-section-space-tight: 42px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 680px) {
  :root { --cp-header-height: 68px; --cp-section-space: 50px; --cp-section-space-tight: 34px; }
  .container { width: min(calc(100% - 20px), var(--cp-page-max)); }
  .card-icon-actions { padding-inline: 8px; }
  .design-service-tools { backdrop-filter:none; box-shadow:none; }
}

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