/* Canonical interaction specification, 31.10.2026. No component logic here. */
:root {
  --ds-navy: #14283F;
  --ds-porcelain: #FAF7F4;
  --ds-soft-rust: #BF7958;
  --ds-butter-yellow: #F1DE9C;
  --ds-error: #A53A45;
  --ds-success: #2F6B4F;
  --ds-error-background: #F6E9EA;
  --ds-success-background: #E7F0EB;
  --ds-navy-hover: #34465A;
  --ds-border: #AAB8C5;
  --ds-neutral-background: #E3E9EF;
  --ds-neutral-hover: #D5DFE8;
  --ds-muted: #8C9BAA;
  --ds-neutral-text: #667789;
  --ds-yellow-light: #F8EDC8;
  --ds-duration: 150ms;
  --ink: var(--ds-navy); --navy: var(--ds-navy); --nav: var(--ds-navy);
  --text: var(--ds-navy); --background: var(--ds-porcelain); --canvas: var(--ds-porcelain);
  --pill: var(--ds-neutral-background); --muted: var(--ds-neutral-text);
  --line: var(--ds-border); --active: var(--ds-navy-hover);
  --accent: var(--ds-soft-rust); --yellow: var(--ds-butter-yellow);
  --state-ink: var(--ds-navy); --state-focus: var(--ds-navy);
  --state-error: var(--ds-error); --state-success: var(--ds-success);
  --state-hover: var(--ds-neutral-hover); --state-pressed: var(--ds-navy);
  --state-control-border: var(--ds-border); --state-muted-text: var(--ds-neutral-text);
  --state-disabled-surface: var(--ds-neutral-background); --state-canvas: var(--ds-porcelain);
  --state-on-danger: var(--ds-porcelain); --state-duration: var(--ds-duration);
  --interaction-hover: var(--ds-neutral-hover); --interaction-pressed: var(--ds-navy);
  --interaction-focus: var(--ds-navy);
}
body { color: var(--ds-navy); }
:is(button,.button,input,textarea,select,summary) {
  transition: background-color var(--ds-duration) ease, color var(--ds-duration) ease,
    border-color var(--ds-duration) ease, box-shadow var(--ds-duration) ease;
}
:is(button,a,summary,input[type=checkbox],input[type=radio]):focus-visible {
  outline: 2px solid var(--ds-navy); outline-offset: 2px;
}
/* Reserve the same border/padding in every field state. A touching paint ring makes the default/hover line 1.5px and focus/error
   2px, including displays which round fractional CSS border widths down. */
:where(input,textarea,select,.picker-control,.select-trigger,[id=order-date]) {
  --field-border: var(--ds-border); --field-ring: .5px;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.native-select):not(.picker-native),
.form-field textarea,.field textarea,.form-field select,.field select,
.picker-control,.select-trigger,[id=order-date],.date-filter-inputs input {
  border: 1px solid var(--field-border);
  border-radius: 12px;
  padding-left: var(--field-padding-left, 16px); padding-right: var(--field-padding-right, 16px);
  background-color: var(--ds-porcelain);
  color: var(--ds-navy);
  box-shadow: 0 0 0 var(--field-ring) var(--field-border);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.native-select):not(.picker-native),
.form-field select,.field select,.picker-control,.select-trigger,[id=order-date],.date-filter-inputs input {
  height: 52px; min-height: 52px;
}
.form-field textarea { min-height: 52px; }
.input-icon-field { --field-padding-left: 52px; }
.number-field { --field-padding-right: 48px; }
:where(input,textarea,select,.picker-control,.select-trigger,[id=order-date]):where(:hover:not(:disabled)) {
  --field-border: var(--ds-navy);
}
:where(input,textarea,select,.picker-control,.select-trigger,[id=order-date]):focus,
:where(.picker-control,.select-trigger,[id=order-date])[aria-expanded=true] {
  --field-border: var(--ds-navy); --field-ring: 1px;
}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus,
.picker-control:focus,.select-trigger:focus,[id=order-date]:focus { outline: none; }
:where(input,textarea,select,.picker-control,.select-trigger)[aria-invalid=true],
:where(input,textarea,select):user-invalid,
.admin-select:has(select[aria-invalid=true]) > .select-trigger,
.card:has(#menu-error:not(:empty)) .admin-select:has(select:invalid) > .select-trigger {
  --field-border: var(--ds-error); --field-ring: 1px;
}
:where(input,textarea,select):disabled,
.admin-select:has(select:disabled) > .select-trigger {
  --field-border: var(--ds-border); --field-ring: .5px;
  color: var(--ds-muted); background-color: var(--ds-neutral-background); cursor: not-allowed;
}
input:disabled,textarea:disabled,select:disabled { --field-border: var(--ds-border); --field-ring: .5px; }
input::placeholder,textarea::placeholder { color: var(--ds-neutral-text); opacity: 1; }
input[type=checkbox],input[type=radio] { accent-color: var(--ds-navy); }
#date-filter-popover { top: calc(100% + 8px); }
/* Primary, outline and neutral choices are distinct component roles. */
.button.primary,button.primary { background-color: var(--ds-navy); color: var(--ds-porcelain); }
.outline,.picker-cancel { background-color: var(--ds-porcelain); color: var(--ds-navy); border-color: var(--ds-navy); }
.pills button,.date-mode button { background-color: var(--ds-neutral-background); color: var(--ds-navy); box-shadow: none; }
@media (hover: hover) {
  .button.primary:hover:not(:disabled),button.primary:hover:not(:disabled) { background-color: var(--ds-navy-hover); color: var(--ds-porcelain); }
  .outline:hover:not(:disabled),.picker-cancel:hover:not(:disabled),
  .pills button:hover:not(:disabled),.date-mode button:hover:not(:disabled),
  .value-stepper button:hover:not(:disabled) { background-color: var(--ds-neutral-hover); color: var(--ds-navy); }
}
.button.primary:active:not(:disabled),button.primary:active:not(:disabled) { background-color: var(--ds-navy); color: var(--ds-porcelain); }
.pills button.active,.date-mode button.selected {
  background-color: var(--ds-navy); color: var(--ds-porcelain); box-shadow: none;
}
@media (hover: hover) {
  .pills button.active:hover:not(:disabled),.date-mode button.selected:hover:not(:disabled) { background-color: var(--ds-navy-hover); color: var(--ds-porcelain); }
}
.pills button:active:not(:disabled),.date-mode button:active:not(:disabled) { background-color: var(--ds-navy); color: var(--ds-porcelain); }
/* Menu dates alone use yellow; delivery calendars do not. */
#dates button,.date-tabs button { background-color: var(--ds-yellow-light); color: var(--ds-navy); box-shadow: none; }
#dates button.active,.date-tabs button.active { background-color: var(--ds-butter-yellow); color: var(--ds-navy); }
.date-tabs small,.date-tabs button.active small { color: var(--ds-navy); }
@media (hover: hover) {
  #dates button:hover:not(:disabled),.date-tabs button:hover:not(:disabled) { background-color: var(--ds-butter-yellow); color: var(--ds-navy); }
}
#dates button:active:not(:disabled),.date-tabs button:active:not(:disabled) { background-color: var(--ds-butter-yellow); color: var(--ds-navy); }
/* Dropdown options retain their original markup and native source values. */
.select-options,.picker-popover,#date-filter-popover { background-color: var(--ds-porcelain); border-color: var(--ds-border); }
.select-options button,.picker-options button { background-color: var(--ds-porcelain); color: var(--ds-navy); box-shadow: none; }
.select-options [aria-selected=true],.picker-options button.selected { background-color: var(--ds-navy); color: var(--ds-porcelain); }
@media (hover: hover) {
  .select-options button:hover:not(:disabled),.picker-options button:hover:not(:disabled) { background-color: var(--ds-neutral-hover); color: var(--ds-navy); }
  .select-options [aria-selected=true]:hover:not(:disabled),.picker-options button.selected:hover:not(:disabled) { background-color: var(--ds-navy-hover); color: var(--ds-porcelain); }
}
.select-options button:active:not(:disabled),.picker-options button:active:not(:disabled) { background-color: var(--ds-navy); color: var(--ds-porcelain); }
.select-options button:focus-visible,.picker-options button:focus-visible { outline: 2px solid var(--ds-navy); outline-offset: -2px; }
.select-options [aria-selected=true]:focus-visible,.picker-options button.selected:focus-visible { outline-color: var(--ds-porcelain); outline-offset: -4px; }
.select-options button:disabled,.picker-options button:disabled { color: var(--ds-muted); background-color: var(--ds-porcelain); }
/* A stable 60px target contains the original 40px selection marker. */
.calendar-grid button,.calendar-grid button.selected {
  position: relative; isolation: isolate; width: 100%; height: 60px;
  align-self: stretch; justify-self: stretch; background-color: transparent;
  color: var(--ds-navy); box-shadow: none;
}
.calendar-grid button::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 40px; height: 40px; transform: translate(-50%,-50%); border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--ds-duration) ease;
}
.calendar-grid button.selected { color: var(--ds-porcelain); }
.calendar-grid button.selected::before { background-color: var(--ds-navy); }
@media (hover: hover) {
  .calendar-grid button:hover:not(:disabled)::before { background-color: var(--ds-neutral-hover); }
  .calendar-grid button.selected:hover:not(:disabled)::before { background-color: var(--ds-navy-hover); }
}
.calendar-grid button:active:not(:disabled)::before { background-color: var(--ds-navy); }
.calendar-grid button:active:not(:disabled) { color: var(--ds-porcelain); }
.calendar-grid button:disabled { color: var(--ds-muted); opacity: 1; }
.calendar-grid button:focus-visible { outline: 2px solid var(--ds-navy); outline-offset: -2px; }
/* FAQ and disclosure rows never get a selected/hover fill. */
.faq summary,.faq details[open] summary,.cart-day > summary { background-color: transparent; color: var(--ds-navy); box-shadow: none; }
@media (hover: hover) {
  .faq summary:hover,.cart-day > summary:hover { background-color: transparent; text-decoration: underline; }
  a:not(.button):hover,.text-button:hover,.table-action:hover,.link-button:hover { color: var(--ds-navy); text-decoration: underline; }
}
.text-button,.table-action,.link-button { background-color: transparent; color: var(--ds-navy); }
/* Preserve surface roles and geometry while eliminating pure-white UI paint. */
.surface,.dish,.cart-day,.card,dialog,table,td { background-color: var(--ds-porcelain); }
.surface,.dish,.cart-day { box-shadow: inset 0 0 0 1px var(--ds-border); }
.card,dialog { border-color: var(--ds-border); }
th { background-color: var(--ds-neutral-background); color: var(--ds-neutral-text); }
.selected-row td,.bulk-bar { background-color: var(--ds-neutral-background); }
.sidebar { background-color: var(--ds-navy); color: var(--ds-porcelain); }
.sidebar nav button { color: var(--ds-porcelain); }
.sidebar nav button.active,.sidebar nav button:hover { background-color: var(--ds-navy-hover); color: var(--ds-porcelain); }
.sidebar :is(button,a):focus-visible { outline-color: var(--ds-porcelain); }
.sidebar .store-link { color: var(--ds-porcelain); }
.designer-nav-icon { background-color: var(--ds-porcelain); }
/* Green belongs only to a confirmed success message/status, never selection. */
.inline-error,.field-error,.sms-error,.field .field-error,.form-field .field-error,
.sms-heading[data-ui-state=error],[id=message] { color: var(--ds-error); }
.inline-error:not(:empty),.field-error { background-color: var(--ds-error-background); }
.sms-heading[data-ui-state=success] { color: var(--ds-success); }
.tag,.tag.new,.tag.hidden { background-color: var(--ds-neutral-background); color: var(--ds-navy); }
.tag.error { background-color: var(--ds-error-background); color: var(--ds-error); }
.tag.delivered { background-color: var(--ds-success-background); color: var(--ds-success); }
.payment-card[data-ui-state=success] .payment-status-icon { color: var(--ds-success); }
.payment-card[data-ui-state=error] .payment-status-icon { color: var(--ds-error); }
button.danger:not(:disabled),button.danger:hover:not(:disabled),button.danger:active:not(:disabled) {
  background-color: var(--ds-error); border-color: var(--ds-error); color: var(--ds-porcelain);
}
button:disabled,.button:disabled { cursor: not-allowed; }
.muted,small,.cell-caption,.account-phone,.delivery-fields small,.cart-menu-row small,
.footer-bottom p,.footer-top > div:not(:first-child) > a,.sms-copy,.form-help,
.checkout-billing .checkout-pay-help,.order-summary .summary-help,
main > header,.admin-top-right time,.admin-top-right small { color: var(--ds-neutral-text); }
@media (prefers-reduced-motion: reduce) {
  :is(button,.button,input,textarea,select,summary),.calendar-grid button::before { transition: none; }
}
button:disabled,.button:disabled,.dialog-actions .danger:disabled {
  background-color: var(--ds-neutral-background); color: var(--ds-muted);
  border-color: var(--ds-border); opacity: 1; box-shadow: none;
}
.calendar-grid button:disabled { background-color: transparent; }
#cart-count { color: var(--ds-porcelain); }
.calendar-grid small { color: var(--ds-neutral-text); }
button { background-color: var(--ds-porcelain); color: var(--ds-navy); }
.dish-photo,.review-photo,.cart-thumb,.photo-placeholder,.photo-cell,.delivery-map,.avatar {
  background-color: var(--ds-neutral-background);
}
.dish-photo { color: var(--ds-muted); }
.notice { background-color: var(--ds-neutral-background); color: var(--ds-neutral-text); }
body:has(.sidebar) p.notice { background-color: transparent; }
.order-day,.cart-eating-dates,.summary-total,.billing-total,.cart-menu-row,
.payment-costs,td,th { border-color: var(--ds-border); }
.status-dot { background-color: var(--ds-soft-rust); }
.reset-filters { color: var(--ds-navy); }
.pagination .dot { background-color: var(--ds-porcelain); opacity: .55; }
.pagination .dot.selected { background-color: var(--ds-soft-rust); opacity: 1; }
select.native-select,input[type=checkbox],input[type=radio] {
  background-color: var(--ds-porcelain); color: var(--ds-navy); border-color: var(--ds-border);
}