/* ════════════════════════════════════════════════════════════════════════
   LIGHT THEME (default) — white background, dark ink, gold + crimson kept.
   Everything is scoped to html[data-theme="light"] so the dark walnut theme
   stays intact and the nav toggle can flip between them. A deeper gold
   (--gold-ink) is used for small text where #C9A84C would fail contrast on
   white; the brighter gold is kept for large/decorative accents and fills.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"]{
  --paper:    #FBF8F2;
  --surface:  #FFFFFF;
  --surface-2:#F5F0E6;
  --ink:      #221C15;
  --ink-muted:rgba(34,28,21,.58);
  --line-lt:  rgba(34,28,21,.12);
  --gold-ink: #9A7A28;
}

/* ── Page canvas ─────────────────────────────────────────────────────────── */
html[data-theme="light"] body{
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink);
}
html[data-theme="light"] body::before{ opacity: .025; mix-blend-mode: multiply; }  /* faint paper grain */
html[data-theme="light"] body::after{ background: none; }                          /* drop dark vignette */

/* ── Top nav + progress ──────────────────────────────────────────────────── */
html[data-theme="light"] .nav{ background: rgba(251,248,242,.88); border-bottom: 1px solid var(--line-lt); }
html[data-theme="light"] .nav--scrolled{ background: rgba(251,248,242,.96); box-shadow: 0 1px 0 var(--line-lt); }
html[data-theme="light"] .nav__progress{ background: var(--paper); border-top-color: var(--line-lt); }
html[data-theme="light"] .nav__cart,
html[data-theme="light"] .nav__theme,
html[data-theme="light"] .nav__chip{ border-color: var(--line-lt); color: var(--ink); }
html[data-theme="light"] .nav__cart:hover,
html[data-theme="light"] .nav__theme:hover{ border-color: var(--gold-ink); background: rgba(154,122,40,.07); }
html[data-theme="light"] .kobe-logo{ filter: invert(1) hue-rotate(180deg) brightness(.92); }   /* white brushed wordmark → dark on white */
html[data-theme="light"] .kobe-mark__since{ color: var(--gold-ink); }

/* ── Interactive menu ────────────────────────────────────────────────────── */
html[data-theme="light"] .kmenu{
  --k-cream: var(--ink);
  --k-muted: var(--ink-muted);
  --k-line:  var(--line-lt);
  --k-gold:  var(--gold-ink);
  color: var(--ink);
}
html[data-theme="light"] .kmenu__cats{ background: rgba(251,248,242,.94); border-bottom-color: var(--line-lt); }
html[data-theme="light"] .kdish__img{ background: var(--surface-2); }
html[data-theme="light"] .kdish__add{ background: rgba(255,255,255,.86); border-color: var(--line-lt); color: var(--ink); }
html[data-theme="light"] .kpage__en{ color: var(--ink); }
html[data-theme="light"] .krow{ border-color: var(--line-lt); }
html[data-theme="light"] .kmenu__foot{ color: var(--ink-muted); }

/* ── Item sheet (modal) ──────────────────────────────────────────────────── */
html[data-theme="light"] .modal{ background: rgba(34,28,21,.42); }
html[data-theme="light"] .modal__card,
html[data-theme="light"] .modal__card--sq{ background: var(--surface) !important; border-color: var(--line-lt); }
html[data-theme="light"] .modal__close{ background: rgba(255,255,255,.82); border-color: var(--line-lt); color: var(--ink); }
html[data-theme="light"] .modal__card--sq .sq-names__th{ color: var(--ink); }
html[data-theme="light"] .modal__card--sq .sq-desc{ color: var(--ink-muted); }
html[data-theme="light"] .seg button,
html[data-theme="light"] .modal__card--sq .sq-side{ background: var(--surface-2); border-color: var(--line-lt); color: var(--ink); }
/* The side name + price carry their own dark-theme colors (cream / gold) that
   override the inherited light color — re-point them so they stay readable. */
html[data-theme="light"] .modal__card--sq .sq-side__name{ color: var(--ink); }
html[data-theme="light"] .modal__card--sq .sq-side__add{ color: var(--gold-ink); opacity: 1; }
html[data-theme="light"] .modal__card--sq .sq-side__check{ border-color: rgba(34,28,21,.35); }
html[data-theme="light"] .modal__card--sq .sq-side.is-on .sq-side__check{ border-color: var(--gold-ink); }
html[data-theme="light"] .sq-notes,
html[data-theme="light"] .modal__card--sq textarea{ background: var(--surface-2); border-color: var(--line-lt); color: var(--ink); }

/* ── Cart drawer ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .drawer{ background: var(--surface); border-left-color: var(--line-lt); }
html[data-theme="light"] .drawer__h{ color: var(--ink); }
html[data-theme="light"] .line{ border-color: var(--line-lt); }
html[data-theme="light"] .line__th, html[data-theme="light"] .line__foot .money{ color: var(--ink); }
/* Option chips + per-dish kitchen note inherit --linen-white (near-white) from
   the dark theme, which vanishes on the white drawer. Re-point both to ink. */
html[data-theme="light"] .line__opts span{ color: var(--ink-muted); border-color: var(--line-lt); opacity: 1; }
html[data-theme="light"] .line__notes{ color: var(--ink); opacity: 1; }
html[data-theme="light"] .drawer__note,
html[data-theme="light"] .drawer__promo{ background: var(--surface-2); border-color: var(--line-lt); }
html[data-theme="light"] .drawer__note-input{ background: var(--surface); border-color: var(--line-lt); color: var(--ink); }
html[data-theme="light"] .drawer__note-input::placeholder{ color: var(--ink-muted); }
html[data-theme="light"] .totals-row span:first-child,
html[data-theme="light"] .totals-row--big{ color: var(--ink); }
html[data-theme="light"] .totals-rule{ background: var(--line-lt); }

/* ── Mode / checkout / payment shells ────────────────────────────────────── */
html[data-theme="light"] .mode,
html[data-theme="light"] .ck,
html[data-theme="light"] .pay{ background: var(--paper); }
html[data-theme="light"] .ck-card{ background: var(--surface); border-color: var(--line-lt); }
html[data-theme="light"] .ck__side{ background: var(--surface); border-color: var(--line-lt); }
html[data-theme="light"] .ck-side__h{ color: var(--gold-ink); }
/* Screen headings + subtitles use cream/white in dark theme → re-point for light. */
html[data-theme="light"] .mode__h,
html[data-theme="light"] .ck__h,
html[data-theme="light"] .pay__h{ color: var(--ink); }
html[data-theme="light"] .mode__sub,
html[data-theme="light"] .ck__sub,
html[data-theme="light"] .pay__sub{ color: var(--ink-muted); opacity: 1; }

/* Payment — bank transfer rows + slip uploader (dark-themed by default). */
html[data-theme="light"] .bank-row{ background: var(--surface-2); border-color: var(--line-lt); }
html[data-theme="light"] .bank-row__label{ color: var(--gold-ink); }
html[data-theme="light"] .bank-row__value{ color: var(--ink); }
html[data-theme="light"] .bank-row__copy{ color: var(--gold-ink); }
html[data-theme="light"] .pay__safe{ color: var(--gold-ink); opacity: 1; }
html[data-theme="light"] .slip-drop__empty{ color: var(--gold-ink); border-color: rgba(154,122,40,.5); }
html[data-theme="light"] .slip-drop__th{ color: var(--ink); }
html[data-theme="light"] .slip-drop__en{ color: var(--ink-muted); opacity: 1; }
html[data-theme="light"] .pay__need-slip{ color: var(--ember-bronze); }

/* Tracking / confirmation — dark-only by default; make cards readable in light.
   The banner stays dark (intentional hero contrast). */
html[data-theme="light"] .trk-card{ background: var(--surface); border-color: var(--line-lt); }
html[data-theme="light"] .trk-card__h{ color: var(--gold-ink); border-bottom-color: var(--line-lt); }
html[data-theme="light"] .tl__dot{ background: var(--surface-2); border-color: rgba(154,122,40,.45); }
html[data-theme="light"] .tl--done .tl__dot{ background: var(--gold-ink); color: #fff; border-color: var(--gold-ink); }
html[data-theme="light"] .tl--now .tl__dot{ border-color: var(--gold-ink); }
html[data-theme="light"] .pulse-dot span{ background: var(--gold-ink); }
html[data-theme="light"] .tl + .tl::before,
html[data-theme="light"] .tl::after{ background: var(--line-lt); }
html[data-theme="light"] .tl__th{ color: var(--ink); }
html[data-theme="light"] .tl__en{ color: var(--gold-ink); }
html[data-theme="light"] .trk-line__th{ color: var(--ink); }
html[data-theme="light"] .trk-line__en{ color: var(--gold-ink); }
html[data-theme="light"] .trk-detail__row span{ color: var(--gold-ink); }
html[data-theme="light"] .trk-detail__row strong{ color: var(--ink); }
html[data-theme="light"] .trk-detail__row .money{ color: var(--gold-ink); }
html[data-theme="light"] .trk-rcpt__no{ color: var(--ink); }
html[data-theme="light"] .trk-rcpt__when{ color: var(--gold-ink); }
html[data-theme="light"] .trk-rcpt__sum{ color: var(--ink); }
html[data-theme="light"] .trk-rcpt__sum span:first-child{ color: var(--gold-ink); }
html[data-theme="light"] .trk-rcpt__sum--total span:first-child{ color: var(--ink) !important; }
html[data-theme="light"] .trk-rcpt__sum--total .money{ color: var(--gold-ink); }
html[data-theme="light"] .trk-rcpt__pay{ background: rgba(201,168,76,.1); border-color: var(--line-lt); color: var(--ink); }
html[data-theme="light"] .trk-rcpt__pay svg{ color: var(--gold-ink); }
html[data-theme="light"] .trk__help{ color: var(--ink-muted); }
html[data-theme="light"] .trk__help em{ color: var(--gold-ink); }
html[data-theme="light"] .trk .btn--ghost{ color: var(--gold-ink); border-color: var(--gold-ink); }
html[data-theme="light"] .trk .btn--ghost:hover{ background: rgba(154,122,40,.08); }
html[data-theme="light"] .ck-side__row span:first-child,
html[data-theme="light"] .ck-side__row--big{ color: var(--ink); }
html[data-theme="light"] .ck-side__rule{ background: var(--line-lt); }
html[data-theme="light"] .ck-side__safe{ color: var(--ink-muted); }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea{ background: var(--surface); border-color: var(--line-lt); color: var(--ink); }
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder{ color: var(--ink-muted); }
html[data-theme="light"] .stepper{ background: var(--surface-2); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] .foot{ background: var(--surface-2); }
html[data-theme="light"] .foot__tag,
html[data-theme="light"] .foot__col li{ color: var(--ink-muted); }
html[data-theme="light"] .foot__h{ color: var(--gold-ink); }
html[data-theme="light"] .foot__col li a:hover{ color: var(--gold-ink); }
html[data-theme="light"] .foot__site{ color: var(--gold-ink); }
html[data-theme="light"] .foot__site:hover{ border-bottom-color: var(--gold-ink); }
html[data-theme="light"] .foot__rule{ background: var(--line-lt); }

/* ── Shared small accents that need a deeper gold on white ───────────────── */
html[data-theme="light"] .sect-label{ color: var(--gold-ink); }