/* ==========================================================================
   Raytabuk — THEME TOKENS (loaded last)
   Light is the default. Dark is [data-theme="dark"] on <html>, set by the inline
   script in <head> before first paint and by js/theme.js afterwards.
   Components in style.css / site.css read these variables only.
   Dark palette: soft green-tinted neutrals (no pure black), one bright accent.
   ========================================================================== */
:root {
  color-scheme: light;
  /* semantic names */
  --background: #F7F8F3;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text-primary: #16201b;
  --text-secondary: #4d564b;
  --border: #e2e6df;
  --accent: #23845B;
  --focus: #1d6fd1;
  --danger: #b3261e;
  --success: #1b6b48;
  /* helpers used by components */
  --heading: #123C2F;
  --surface-2: #f1f4ee;            /* hover, table head, input focus */
  --tint: #eef1ea;                 /* alt sections, placeholders */
  --tint-2: #e4ebe5;
  --accent-soft: #e4f0ea;
  --icon-muted: #6c8478;
  --field-border: #c8d1c9;
  --line-strong: #b9c5bc;
  --tag-text: #33403a;
  --btn-outline: #123C2F;
  --header-bg: rgba(255, 255, 255, 0.97);
  --danger-bg: #fde8e6;
  --danger-text: #b3261e;
  --warn-bg: #fff3cd;
  --warn-text: #8a6414;
  --sand-text: #8a5a1f;
  --toast-bg: #0c2b21;
  --toast-text: #ffffff;
  --on-accent: #ffffff;
  --shadow-card: 0 8px 22px -12px rgba(18, 60, 47, .35);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0B1411;
  --surface: #17261F;
  --surface-elevated: #1c2e25;
  --text-primary: #F1F5F2;
  --text-secondary: #B5C5BA;
  --border: #2B4235;
  --accent: #4ADE80;
  --focus: #8ab4ff;
  --danger: #ff9f97;
  --success: #4ADE80;

  --heading: #F1F5F2;
  --surface-2: #20352A;
  --tint: #101D17;
  --tint-2: #0d1812;
  --accent-soft: #1f3a2c;
  --icon-muted: #8fb0a0;
  --field-border: #5a7767;
  --line-strong: #3a5547;
  --tag-text: #d3e0d7;
  --btn-outline: #6f9c85;
  --header-bg: rgba(23, 38, 31, 0.96);
  --danger-bg: #3b1d1a;
  --danger-text: #ffb4ab;
  --warn-bg: #3a2f12;
  --warn-text: #f2c94c;
  --sand-text: #e4c98c;
  --toast-bg: #20352A;
  --toast-text: #F1F5F2;
  --on-accent: #082313;
  --shadow-card: 0 10px 26px -14px rgba(0, 0, 0, .7);

  /* legacy style.css tokens mapped onto the dark palette */
  --bg: #0B1411;
  --bg-alt: #101D17;
  --text: #F1F5F2;
  --text-muted: #B5C5BA;
  --primary: #1f6b49;              /* pressed chips / active states: white text stays AA */
  --primary-strong: #F1F5F2;       /* only ever used as a text colour */
  --accent-strong: #86efac;
  --green-100: #1f3a2c;
  --green-300: #8fd9a8;
  --sand-100: #26261c;
  --sand-500: #b8a77e;
  --gray-100: #1c2e25;
  --gray-200: #2B4235;
  --gray-400: #8aa093;
  --gray-500: #a0b4a8;
  --gray-600: #b5c5ba;
  --gray-700: #cbd8cf;
  --forest-900: #0f2219;
  --forest-800: #163226;
  --charcoal-900: #09110d;

  /* site.css tokens */
  --page: #0B1411;
  --card: #17261F;
  --line: #2B4235;
  --ink: #F1F5F2;
  --muted: #B5C5BA;
  --brand: #14301f;
  --brand-ink: #08110d;
  --action: #4ADE80;
  --action-hover: #86efac;
  --action-text: #4ADE80;
  --sand: #cdbf98;
  --sand-soft: #26261c;
}

body { background: var(--page); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: #2f7d57; color: #fff; }

/* ---- text that sits on the bright accent in dark mode ---- */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .cart-badge,
:root[data-theme="dark"] .cart-badge-inline,
:root[data-theme="dark"] .service-icon,
:root[data-theme="dark"] .whyus-check,
:root[data-theme="dark"] .footer-social a:hover { color: var(--on-accent); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--action-hover); }
:root[data-theme="dark"] .cart-badge { box-shadow: 0 0 0 2px var(--surface); }
:root[data-theme="dark"] .cart-item-remove:hover { background: #c0362e; color: #fff; }
:root[data-theme="dark"] .step::before,
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }

/* ---- buttons that stay light on dark bands in both themes ---- */
.btn-light { background: #ffffff; color: #123C2F; }
.btn-light:hover { background: #efe8d3; }
:root[data-theme="dark"] .btn-secondary { background: transparent; color: var(--heading); border-color: var(--btn-outline); }
:root[data-theme="dark"] .btn-secondary:hover { background: var(--surface-2); color: var(--heading); border-color: var(--accent); }
:root[data-theme="dark"] .btn-ghost { background: var(--surface-2); color: var(--heading); }
:root[data-theme="dark"] .btn-ghost:hover { background: #2a4436; }

/* ---- header / logo (the mark is dark blue: give it a neutral plate in dark mode) ---- */
:root[data-theme="dark"] .nav .brand-logo { background: #ffffff; border-radius: 10px; padding: 3px; }
:root[data-theme="dark"] .nav, :root[data-theme="dark"] .nav.is-scrolled, :root[data-theme="dark"] .nav.menu-open { background: var(--header-bg); border-bottom-color: var(--border); }
:root[data-theme="dark"] .nav .icon-btn:hover, :root[data-theme="dark"] .nav .lang-switch:hover { background: var(--surface-2); }
:root[data-theme="dark"] .nav .lang-switch { background: transparent; color: var(--heading); }
:root[data-theme="dark"] .mobile-menu { background: var(--surface); }

/* ---- inputs, selects, placeholders ---- */
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: var(--ink); }
:root[data-theme="dark"] ::placeholder { color: #8fa598; opacity: 1; }
:root[data-theme="dark"] input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset; }
:root[data-theme="dark"] select option { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .field input:focus, :root[data-theme="dark"] .field select:focus, :root[data-theme="dark"] .field textarea:focus,
:root[data-theme="dark"] .nav-search input:focus, :root[data-theme="dark"] .f-range input:focus, :root[data-theme="dark"] .shop-search input:focus {
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .28);
}
:root[data-theme="dark"] .f-opt:hover { background: var(--surface-2); }

/* ---- cards, panels, tables ---- */
:root[data-theme="dark"] .cat-tile:hover, :root[data-theme="dark"] .prod-card:hover { box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .p-table th { background: var(--surface-2); }
:root[data-theme="dark"] .qty-mini button:hover { background: var(--surface-2); }
:root[data-theme="dark"] .pdp-media, :root[data-theme="dark"] .prod-media { background: linear-gradient(135deg, #1c2e25, #15251d); }
:root[data-theme="dark"] .info-box { background: var(--sand-soft); }
:root[data-theme="dark"] .partner-row .p { background: #f4f6f1; border-color: var(--border); }   /* client logos keep their own light plate */
:root[data-theme="dark"] .section--alt { background: var(--tint); }
:root[data-theme="dark"] .cta-band, :root[data-theme="dark"] .callout, :root[data-theme="dark"] .hero2, :root[data-theme="dark"] .page-head { background: var(--brand); }
:root[data-theme="dark"] .hero2, :root[data-theme="dark"] .page-head { border-bottom: 1px solid var(--border); }
:root[data-theme="dark"] .footer { background: var(--brand-ink); border-top: 1px solid var(--border); }

/* ---- dialogs, toasts, status ---- */
:root[data-theme="dark"] .modal { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
:root[data-theme="dark"] .modal-overlay { background: rgba(4, 9, 7, .72); }
:root[data-theme="dark"] .toast { border: 1px solid var(--border); }
:root[data-theme="dark"] .toast svg { color: var(--accent); }
:root[data-theme="dark"] .form-status { background: var(--accent-soft); color: var(--ink); }
:root[data-theme="dark"] .form-status.is-error { background: var(--danger-bg); color: var(--danger-text); }
:root[data-theme="dark"] .admin-badge.status-in_progress { background: var(--warn-bg); color: var(--warn-text); }
:root[data-theme="dark"] .admin-badge.badge-order { background: #1f3a2c; color: #bfeccd; }
:root[data-theme="dark"] .skeleton { background: linear-gradient(100deg, #1c2e25 30%, #25402f 50%, #1c2e25 70%); background-size: 200% 100%; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1c16; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a5547; }
:root[data-theme="dark"] .spinner { border-color: #2B4235; border-top-color: var(--accent); }
:root[data-theme="dark"] .whatsapp-float { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }

/* ---- colour transitions: explicit properties, 180ms ---- */
.nav, .card, .panel, .prod-card, .cat-tile, .step, .svc-card, .form-card, .filters, .modal, .footer, .btn,
.field input, .field select, .field textarea, .f-range input, .shop-search input, .nav-search input, .select, .p-table-wrap, .spec-table, .seg {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* ---- theme switcher ---- */
.theme-wrap { position: relative; }
.theme-btn svg { width: 22px; height: 22px; }
.theme-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 196px; z-index: 1200;
  background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .45); display: grid; gap: 2px;
}
.theme-menu[hidden] { display: none; }
.theme-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); font-weight: 600; font-size: .92rem; min-height: 44px;
}
.theme-opt svg { width: 20px; height: 20px; flex-shrink: 0; }
.theme-opt:hover, .theme-opt:focus-visible { background: var(--surface-2); }
.theme-opt[aria-checked="true"] { background: var(--accent-soft); color: var(--heading); }
.theme-opt .tick { margin-inline-start: auto; width: 18px; height: 18px; color: var(--action-text); visibility: hidden; }
.theme-opt[aria-checked="true"] .tick { visibility: visible; }
.theme-seg { display: none; border: 1.5px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; background: var(--surface); margin-block-end: 6px; }
.theme-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 8px; font-weight: 700; font-size: .88rem; color: var(--ink); }
.theme-seg button svg { width: 18px; height: 18px; }
.theme-seg button[aria-checked="true"] { background: var(--accent-soft); color: var(--heading); box-shadow: inset 0 0 0 1.5px var(--action); }
.mobile-menu .theme-seg { display: flex; }
@media (max-width: 559px) { .theme-wrap { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav, .card, .panel, .prod-card, .cat-tile, .step, .svc-card, .form-card, .filters, .modal, .footer, .btn,
  .field input, .field select, .field textarea { transition: none; }
}

/* ---- small polish found during testing ---- */
.mobile-search input { background: var(--surface); color: var(--ink); }
.theme-seg button { font-size: .82rem; padding-inline: 6px; white-space: nowrap; }
@media (max-width: 380px) { .theme-seg button svg { display: none; } }