/* ==========================================================================
   THEME MODES (light / dark / gold) - global theme layer
   Loaded on every page via web/include/head.blade.php.
   The dark/gold token overrides mirror menu-redesign.css (menu page only)
   and add the global surface/typography/component rules so switching themes
   never produces black text on a black background anywhere on the site.
   ========================================================================== */

/* ---- design tokens (shared with menu-redesign.css) ----------------------- */
:root {
  --th-ink: #0a0909;
  --th-black: #000000;
  --th-cream: #fffcf7;
  --th-white: #ffffff;
  --th-gold: #c8974e;
  --th-gold-soft: #e7d3b3;
  --th-brown: #2b1b16;
  --th-line: rgba(10, 9, 9, .12);
  --th-muted: #5c534e;
  --th-card: #ffffff;
  --th-dark-surface: #171310;
  --th-dark-card: #1e1915;
  --th-dark-ink: #f3ede4;
  --th-dark-muted: #b3a89c;
  --th-dark-line: rgba(217, 171, 99, .35);
}

/* ==========================================================================
   DARK MODE - deep espresso with gold accents
   ========================================================================== */
[data-theme="dark"] {
  --th-ink: #f3ede4;
  --th-black: #ffffff;
  --th-cream: #171310;
  --th-white: #100d0b;
  --th-gold: #d9ab63;
  --th-gold-soft: #6d5638;
  --th-brown: #c8974e;
  --th-line: rgba(243, 237, 228, .16);
  --th-muted: #b3a89c;
  --th-card: #1e1915;

  /* tokens used by the base stylesheet (style.css :root) */
  --th-color-bg: #171310;
  --th-color-surface: #1e1915;
  --th-color-ink: #f3ede4;
  --th-color-ink-muted: #b3a89c;
  --th-color-accent-soft: #2a2119;
  --th-color-line: rgba(243, 237, 228, .14);
}

/* ---- base page ------------------------------------------------------------- */
[data-theme="dark"] body {
  background: var(--th-white);
  color: var(--th-dark-muted);
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .title,
[data-theme="dark"] .subtitle {
  color: var(--th-dark-ink);
}
[data-theme="dark"] .section { background: var(--th-dark-surface) !important; }
[data-theme="dark"] .section-light { background: #14100d !important; }
[data-theme="dark"] .section-title-wrap h5 { color: var(--th-gold); }

/* ---- text utilities (never black on black) ---------------------------------- */
[data-theme="dark"] .text-dark:not(.badge),
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-black-50 { color: var(--th-dark-ink) !important; }
[data-theme="dark"] .text-muted,
[data-theme="dark"] .section .text-muted { color: var(--th-dark-muted) !important; }

/* legacy inline dark text colors used across the blade templates */
[data-theme="dark"] [style*="color: #1d1d1d"],
[data-theme="dark"] [style*="color:#1d1d1d"],
[data-theme="dark"] [style*="color: #1D1D1D"],
[data-theme="dark"] [style*="color: #1D2228"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color: #222"] { color: var(--th-dark-ink) !important; }

/* legacy inline light surfaces used across the blade templates */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #f5f5f5"],
[data-theme="dark"] [style*="background: #f9f9f9"],
[data-theme="dark"] [style*="background: #faf3e8"],
[data-theme="dark"] [style*="background: #fdf3e0"],
[data-theme="dark"] [style*="background: #fffaf5"],
[data-theme="dark"] [style*="background: #fffcf7"] { background: var(--th-dark-card) !important; }

/* ---- surfaces: cards, boxes, modals, lists, tables -------------------------- */
[data-theme="dark"] .card,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .jumbotron,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .review-card {
  background: var(--th-dark-card) !important;
  color: var(--th-dark-ink);
  border-color: var(--th-dark-line) !important;
}
[data-theme="dark"] .card h1, [data-theme="dark"] .card h2, [data-theme="dark"] .card h3,
[data-theme="dark"] .card h4, [data-theme="dark"] .card h5, [data-theme="dark"] .card h6,
[data-theme="dark"] .modal-content h1, [data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3, [data-theme="dark"] .modal-content h4,
[data-theme="dark"] .modal-content h5, [data-theme="dark"] .modal-content h6 { color: var(--th-dark-ink); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--th-dark-line) !important; background: var(--th-dark-card) !important; }
[data-theme="dark"] .table { color: var(--th-dark-ink); }
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table thead th { border-color: rgba(243, 237, 228, .16) !important; color: var(--th-dark-ink); }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(217, 171, 99, .08); color: var(--th-dark-ink); }
[data-theme="dark"] .page-link {
  background-color: var(--th-dark-card);
  border-color: var(--th-dark-line);
  color: var(--th-dark-ink);
}
[data-theme="dark"] .page-link:hover { background-color: #2a2119; color: #fff; }
[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--th-gold);
  border-color: var(--th-gold);
  color: #100d0b;
}

/* ---- forms ------------------------------------------------------------------- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"] {
  background-color: var(--th-dark-card);
  color: var(--th-dark-ink);
  border-color: rgba(243, 237, 228, .22);
}
[data-theme="dark"] .form-control::placeholder { color: rgba(243, 237, 228, .45); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
  background-color: var(--th-dark-card);
  color: var(--th-dark-ink);
  border-color: var(--th-gold);
  box-shadow: 0 0 0 .2rem rgba(217, 171, 99, .18);
}
[data-theme="dark"] .input-group-text {
  background-color: #2a2119;
  color: var(--th-dark-ink);
  border-color: rgba(243, 237, 228, .22);
}

/* ---- buttons ------------------------------------------------------------------ */
/* Bootstrap outline buttons that keep a dark border/text color would be
   invisible on the dark surfaces - flip them to cream/gold. */
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-secondary {
  color: var(--th-dark-ink);
  border-color: rgba(243, 237, 228, .4);
}
[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .btn-outline-dark:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--th-gold);
  border-color: var(--th-gold);
  color: #100d0b;
}
[data-theme="dark"] .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .6); }
[data-theme="dark"] .btn-link { color: var(--th-gold); }

/* ---- header (vars are re-scoped on .th-header, so all var() consumers
        inside the header flip automatically) ---------------------------------- */
[data-theme="dark"] .th-header {
  --th-ink: #f3ede4;
  --th-cream: #100d0b;
  --th-sand: #2a2119;
  --th-line: rgba(243, 237, 228, .18);
  background: var(--th-cream) !important;
  box-shadow: 0 1px 0 rgba(217, 171, 99, .25) !important;
}
[data-theme="dark"] .th-iconbtn:hover { background: #2a2119; color: #e7bd78; }
[data-theme="dark"] .th-signin:hover,
[data-theme="dark"] .th-burger:hover,
[data-theme="dark"] .th-btn-ghost:hover { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .th-burger:hover span { background: #e7bd78; }
[data-theme="dark"] .th-lang-menu,
[data-theme="dark"] .th-lang-menu::before,
[data-theme="dark"] .th-auth__card,
[data-theme="dark"] .th-auth__card::before {
  background: var(--th-dark-card);
  border-color: var(--th-dark-line);
}
[data-theme="dark"] .th-lang-menu a { color: var(--th-dark-ink); }
[data-theme="dark"] .th-lang-menu a:hover { background: #2a2119; }
[data-theme="dark"] .th-drawer { background: #100d0b; }
[data-theme="dark"] .th-drawer__head { background: var(--th-dark-card); border-bottom-color: var(--th-dark-line); }
[data-theme="dark"] .th-contact,
[data-theme="dark"] .th-contact a,
[data-theme="dark"] .th-contact span { color: var(--th-dark-muted); }
[data-theme="dark"] .th-theme:hover { background: #2a2119; color: #e7bd78; }
[data-theme="dark"] .th-lang-btn:hover,
[data-theme="dark"] .th-lang-globe.is-open .th-lang-btn { color: #e7bd78; }
[data-theme="dark"] .th-drawer__close:hover { color: #e7bd78; }
[data-theme="dark"] .th-auth__close:hover { background: #2a2119; color: var(--th-dark-ink); }

/* ---- cart sidebar -------------------------------------------------------------- */
[data-theme="dark"] .cart-sidebar { background: var(--th-dark-surface); }
[data-theme="dark"] .cart-sidebar-header { border-bottom-color: var(--th-dark-line); }
[data-theme="dark"] .cart-sidebar-item { border-bottom-color: rgba(243, 237, 228, .14); }
[data-theme="dark"] .cart-sidebar-item .media h5 a,
[data-theme="dark"] .cart-sidebar-item .media h5 a:hover,
[data-theme="dark"] .cart-sidebar-item .media h5:hover { color: var(--th-dark-ink); }
[data-theme="dark"] .cart-sidebar-item .close-btn { border-color: rgba(243, 237, 228, .3); }
[data-theme="dark"] .cart-sidebar-footer { background: var(--th-dark-card); }
[data-theme="dark"] .qty span,
[data-theme="dark"] .qty input {
  background-color: var(--th-dark-card);
  border-color: rgba(243, 237, 228, .2);
  color: var(--th-dark-ink);
}
[data-theme="dark"] .qty span:hover { background-color: #2a2119; }
[data-theme="dark"] .close-btn.close-dark span,
[data-theme="dark"] .close-btn.dark span { background-color: var(--th-dark-ink); }

/* ---- preloader -------------------------------------------------------------------- */
[data-theme="dark"] .ct-preloader { background-color: var(--th-white); }

/* ==========================================================================
   GOLDEN CREAM MODE - warm festive tone (light surfaces, so mainly
   page/header backgrounds need adjusting)
   ========================================================================== */
[data-theme="gold"] {
  --th-cream: #f6e9d2;
  --th-white: #fbf3e3;
  --th-gold: #b07f35;
  --th-gold-soft: #d9bc8c;
  --th-brown: #4a2f1d;
  --th-line: rgba(74, 47, 29, .18);
  --th-muted: #6d5941;
  --th-card: #fffaf0;
}
[data-theme="gold"] body { background: var(--th-white); }
[data-theme="gold"] .section { background: var(--th-cream) !important; }
[data-theme="gold"] .th-header {
  --th-cream: #fbf3e3;
  background: var(--th-cream) !important;
}

/* ---- Catering & Events section (inline #2b1b16 dark background) -------------
   The gold rule above swaps its dark background for cream, so its white
   text must become dark ink for contrast. */
[data-theme="gold"] section[style*="#2b1b16"] { color: #241a13; }
[data-theme="gold"] section[style*="#2b1b16"] .text-white { color: #241a13 !important; }
[data-theme="gold"] section[style*="#2b1b16"] p[style*="rgba(255,255,255,0.8)"] { color: #4a2f1d !important; }
[data-theme="gold"] section[style*="#2b1b16"] .text-white-50 { color: #6d5941 !important; }
[data-theme="gold"] section[style*="#2b1b16"] [style*="background: rgba(255,255,255,0.05)"] {
  background: rgba(74, 47, 29, .07) !important;
  border-color: rgba(74, 47, 29, .18) !important;
}
[data-theme="gold"] section[style*="#2b1b16"] .btn-outline-light { border-color: #4a2f1d; color: #241a13; }
[data-theme="gold"] section[style*="#2b1b16"] .btn-outline-light:hover,
[data-theme="gold"] section[style*="#2b1b16"] .btn-outline-light:focus { background: #4a2f1d; color: #fff; }