/*
 * TGK light and dark mode (includes/theme.php sets data-theme on <html> before the page is drawn).
 * Dark is the site's original look and needs nothing here. Light gives the same design tokens their light values, so
 * everything built on css/tgk-v2.css follows by itself. Photo heroes, navy bands, the header bar and the footer stay dark
 * in both modes ("dark islands" below), so white text over pictures always reads.
 * Page code: use rgba(var(--tgk-fg-rgb), .x) for "white at some strength" (it is ink in light mode), and the tokens for
 * surfaces and text, never fixed dark or white colors.
 */

:root {
  /* For see-through colors in page code: rgba(var(--tgk-fg-rgb), .x) and so on. They flip with the mode. */
  --tgk-fg-rgb: 255, 255, 255;        /* "white" on dark, ink on light */
  --tgk-text-rgb: 244, 241, 234;      /* the warm text white on dark, ink on light */
  --tgk-ink-rgb: 11, 15, 19;          /* page background */
  --tgk-ink-2-rgb: 15, 25, 35;        /* cards */
  --tgk-ink-3-rgb: 21, 33, 46;        /* raised, inputs */
  --tgk-accent-text: #FF6700;
}

/* ---------- the theme button ---------- */
.tgk-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid rgba(var(--tgk-fg-rgb), .18); background: rgba(var(--tgk-fg-rgb), .04);
  color: inherit; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tgk-theme-toggle:hover { border-color: var(--tgk-color-orange, #FF6700); color: var(--tgk-color-orange, #FF6700); }
.tgk-theme-toggle:focus-visible { outline: 2px solid var(--tgk-color-orange, #FF6700); outline-offset: 2px; }
.tgk-theme-toggle--sm { width: 28px; height: 28px; font-size: .8rem; }
.tgk-theme-toggle--sm svg { width: 15px; height: 15px; }
.tgk-theme-toggle svg { display: none; }
html:not([data-theme-pref]) .tgk-theme-toggle svg[data-pref="auto"],
html[data-theme-pref="auto"] .tgk-theme-toggle svg[data-pref="auto"],
html[data-theme-pref="light"] .tgk-theme-toggle svg[data-pref="light"],
html[data-theme-pref="dark"] .tgk-theme-toggle svg[data-pref="dark"] { display: block; }

/* ---------- light values ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --tgk-fg-rgb: 17, 22, 28;
  --tgk-text-rgb: 17, 22, 28;
  --tgk-ink-rgb: 246, 243, 236;
  --tgk-ink-2-rgb: 255, 255, 255;
  --tgk-ink-3-rgb: 237, 232, 222;
  --tgk-accent-text: #B84700;                 /* orange as text on light: 5.1:1 */

  --tgk-color-ink: #F6F3EC;                   /* page background, warm off white */
  --tgk-color-ink-2: #FFFFFF;                 /* raised surface, cards */
  --tgk-color-ink-3: #EDE8DE;                 /* hover surface, inputs */
  --tgk-color-bone: #E7E1D4;
  --tgk-color-bone-2: #DCD5C6;

  --tgk-color-text: #11161C;                  /* 17:1 */
  --tgk-color-text-muted: #46505B;            /* 7.9:1 */
  --tgk-color-text-subtle: #5D6773;           /* 5.6:1 */

  --tgk-color-line: rgba(17, 22, 28, 0.11);
  --tgk-color-line-strong: rgba(17, 22, 28, 0.22);

  --tgk-color-success: #13804B;
  --tgk-color-danger: #C62828;
  --tgk-color-orange-soft: rgba(255, 103, 0, 0.10);
  --tgk-shadow-sm: 0 1px 2px rgba(17, 22, 28, 0.08);   /* the dark shadows would look like smudges on light */
  --tgk-shadow-md: 0 10px 30px -10px rgba(17, 22, 28, 0.16);
  --tgk-shadow-lg: 0 30px 80px -20px rgba(17, 22, 28, 0.22);

  /* The cart drawer and the product quick view (built by js/main.js; dark values are the fallbacks there) */
  --tgk-shade-rgb: 214, 205, 188;             /* "black at some strength" for wells and footers: a soft warm grey */
  --tgk-panel-head: #FFFFFF;
  --tgk-panel-bg: #FFFFFF;
  --tgk-panel-soft: rgba(255, 255, 255, 0.7);
  --tgk-thumb-bg: var(--tgk-color-ink-3);
  --tgk-blue-text: #1F5FAD;

  /* Text colors the pages give as a fallback, var(--tgk-body-text, #C3CAD2) and so on: only light mode sets them, the
     dark islands put them back to "initial" so each page's own dark value shows there. */
  --tgk-body-text: #2E3640;
  --tgk-danger-text: #B42318;
  --tgk-success-text: #13804B;
  --tgk-warn-text: #8A5300;
  --tgk-accent-soft-text: #B84700;
}
html[data-theme="light"] body { background-color: var(--tgk-color-ink); color: var(--tgk-color-text); }

/* Orange used as text needs the deeper orange on light backgrounds (buttons keep the bright one). */
html[data-theme="light"] :is(.tgk-eyebrow, .accent, .text-accent, .tgk-accent, .tgk-link) { color: var(--tgk-accent-text); }
html[data-theme="light"] .tgk-section--bone .tgk-eyebrow { color: var(--tgk-accent-text); }

/* ---------- dark islands: the same dark values inside these, whatever the mode ---------- */
html[data-theme="light"] :is(.tgk-hero, .tgk-page-hero, .tgk-prog-hero, .tgk-legal-hero, .tgk-ab-hero, .tgk-blog-hero, .tgk-tpe-hero,
  .tgk-section--navy, .tgk-header, .tgk-utility, .tgk-footer, .tgk-keep-dark, .tgk-mobile-menu, .tgk-tile--media, .tgk-cta-band, .tgk-drawer, .tgk-video, #page-hero) {
  color-scheme: dark;
  --tgk-fg-rgb: 255, 255, 255;
  --tgk-text-rgb: 244, 241, 234;
  --tgk-ink-rgb: 11, 15, 19;
  --tgk-ink-2-rgb: 15, 25, 35;
  --tgk-ink-3-rgb: 21, 33, 46;
  --tgk-accent-text: #FF6700;
  --tgk-color-ink: #0B0F13;
  --tgk-color-ink-2: #0f1923;
  --tgk-color-ink-3: #15212e;
  --tgk-color-text: #F4F1EA;
  --tgk-color-text-muted: #A7B0BA;
  --tgk-color-text-subtle: #8A94A0;
  --tgk-color-line: rgba(255, 255, 255, 0.09);
  --tgk-color-line-strong: rgba(255, 255, 255, 0.18);
  --tgk-color-success: #3DD68C;
  --tgk-color-danger: #FF5A5F;
  --tgk-color-orange-soft: rgba(255, 103, 0, 0.14);
  --tgk-shade-rgb: 0, 0, 0;
  --tgk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --tgk-shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --tgk-shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  --tgk-blue-text: #4a9eff;
  --tgk-body-text: initial;
  --tgk-danger-text: initial;
  --tgk-success-text: initial;
  --tgk-warn-text: initial;
  --tgk-accent-soft-text: initial;
  color: var(--tgk-color-text);   /* text color is inherited already worked out, so each island sets its own */
}

/* Orange badges: a light pill with deeper orange text on light surfaces, the dark pill inside the dark islands. */
html[data-theme="light"] .tgk-badge--orange { color: var(--tgk-accent-text); background: rgba(255, 103, 0, 0.08); }
html[data-theme="light"] :is(.tgk-hero, .tgk-page-hero, .tgk-prog-hero, .tgk-legal-hero, .tgk-ab-hero, .tgk-blog-hero, .tgk-tpe-hero, .tgk-section--navy, .tgk-header, .tgk-utility, .tgk-footer, .tgk-keep-dark, .tgk-mobile-menu, .tgk-tile--media, .tgk-cta-band, .tgk-drawer, .tgk-video, #page-hero) .tgk-badge--orange { color: #FF8A3D; background: rgba(16, 11, 8, 0.78); }
/* Shop product pictures sit on a soft light square instead of the dark one. */
html[data-theme="light"] .tgk-product__media { background: radial-gradient(circle at 50% 40%, #FFFFFF, var(--tgk-color-ink-3) 70%); }

/* Cart drawer: category tags and the empty cart button in colors that read on white. */
html[data-theme="light"] .cat-badge-merch { color: #B84700; }
html[data-theme="light"] .cat-badge-equipment { color: #15803D; }
html[data-theme="light"] .cat-badge-adventure { color: #7E22CE; }
html[data-theme="light"] :is(#cart-item-count, #cart-drawer .tgk-dim, #qv-price-old) { color: var(--tgk-color-text-subtle) !important; }
html[data-theme="light"] .item-action-btn { color: var(--tgk-color-text-subtle); }
html[data-theme="light"] .btn-continue-shopping { color: var(--tgk-color-text-muted); }
html[data-theme="light"] .btn-continue-shopping:hover { color: var(--tgk-color-text); }
html[data-theme="light"] .item-action-btn:hover { color: var(--tgk-color-text); }
html[data-theme="light"] .item-action-btn.remove:hover { color: var(--tgk-color-danger); }
html[data-theme="light"] #cart-drawer .btn-checkout, html[data-theme="light"] #cart-drawer .btn-checkout span { color: #FFFFFF; }
html[data-theme="light"] #cart-empty-close-btn { background: var(--tgk-color-ink-3); border-color: var(--tgk-color-line-strong); }
html[data-theme="light"] #quick-view-modal { box-shadow: 0 25px 60px rgba(17, 22, 28, 0.35) !important; }
html[data-theme="light"] #quick-view-overlay { background: rgba(17, 22, 28, 0.55) !important; }

/* ---------- utility classes from the older pages (Tailwind), outside the dark islands ---------- */
html[data-theme="light"] .text-white:not(:is(.tgk-hero, .tgk-page-hero, .tgk-prog-hero, .tgk-legal-hero, .tgk-ab-hero, .tgk-blog-hero, .tgk-tpe-hero, .tgk-section--navy, .tgk-header, .tgk-utility, .tgk-footer, .tgk-keep-dark, .tgk-mobile-menu, .tgk-tile--media, .tgk-cta-band, .tgk-drawer, .tgk-video, #page-hero) *) { color: var(--tgk-color-text); }
html[data-theme="light"] [class*="text-white/"]:not(:is(.tgk-hero, .tgk-page-hero, .tgk-prog-hero, .tgk-legal-hero, .tgk-ab-hero, .tgk-blog-hero, .tgk-tpe-hero, .tgk-section--navy, .tgk-header, .tgk-utility, .tgk-footer, .tgk-keep-dark, .tgk-mobile-menu, .tgk-tile--media, .tgk-cta-band, .tgk-drawer, .tgk-video, #page-hero) *) { color: rgba(var(--tgk-fg-rgb), .62); }
html[data-theme="light"] :is(.border-white\/5, .border-white\/10, .border-white\/15, .border-white\/20):not(:is(.tgk-hero, .tgk-page-hero, .tgk-prog-hero, .tgk-legal-hero, .tgk-ab-hero, .tgk-blog-hero, .tgk-tpe-hero, .tgk-section--navy, .tgk-header, .tgk-utility, .tgk-footer, .tgk-keep-dark, .tgk-mobile-menu, .tgk-tile--media, .tgk-cta-band, .tgk-drawer, .tgk-video, #page-hero) *) { border-color: var(--tgk-color-line); }
html[data-theme="light"] :is(.bg-white\/5, .bg-white\/10):not(:is(.tgk-hero, .tgk-page-hero, .tgk-prog-hero, .tgk-legal-hero, .tgk-ab-hero, .tgk-blog-hero, .tgk-tpe-hero, .tgk-section--navy, .tgk-header, .tgk-utility, .tgk-footer, .tgk-keep-dark, .tgk-mobile-menu, .tgk-tile--media, .tgk-cta-band, .tgk-drawer, .tgk-video, #page-hero) *) { background-color: rgba(var(--tgk-fg-rgb), .04); }

/* ---------- pop-ups (SweetAlert): pages give them dark colors in code; light mode makes them light ---------- */
html[data-theme="light"] .swal2-popup { background: #FFFFFF !important; color: var(--tgk-color-text) !important; border: 1px solid var(--tgk-color-line); }
html[data-theme="light"] .swal2-popup :is(.swal2-title, .swal2-html-container, .swal2-content, label) { color: var(--tgk-color-text) !important; }
html[data-theme="light"] .swal2-popup :is(.swal2-input, .swal2-textarea, .swal2-select) { background: var(--tgk-color-ink-3) !important; color: var(--tgk-color-text) !important; border-color: var(--tgk-color-line-strong) !important; }