/**
 * ZANK POS Enterprise — light theme override for the guest storefront
 * (shop, checkout, track, login, register). Load AFTER main.css.
 *
 * This redeclares the SAME design-system token names main.css defines on
 * :root — because every shared component (.btn, .card, .form-input,
 * .badge, headings, .navbar…) already references those tokens via var(),
 * redefining the values here (loaded later, so it wins the cascade) is
 * enough to relight the whole page. No component rules are duplicated,
 * and dark pages that don't load this file (admin, member dashboard,
 * the landing page's hero) are completely unaffected.
 */
:root {
  --c-900: #E7EEEC;
  --c-800: #D3E1DD;
  --c-600: #7FA9A3;
  --c-400: #3B8574;
  --c-200: #10201F;

  --text-primary: #10201F;
  --text-secondary: #3B524E;
  --text-muted: #6C8985;

  --bg-base: #FFFFFF;
  --bg-surface: #F5F8F7;
  --bg-elevated: #ECF3F1;

  --border: rgba(16, 32, 31, 0.14);
  --border-active: #1B6753;

  --accent: #1B6753;
  --accent-hover: #144F3E;

  --shadow-sm: 0 1px 2px rgba(16,32,31,.06);
  --shadow-md: 0 4px 16px rgba(16,32,31,.08);
  --shadow-lg: 0 8px 32px rgba(16,32,31,.1);
}

/* .btn-primary sets text color from --c-900, which is normally the dark
   "ink on light accent" pairing for the dark theme. Here --accent is itself
   dark, so primary-button text needs to be explicitly white. */
.btn-primary { color: #FFFFFF; }
.btn-primary:hover { color: #FFFFFF; }

/* Radial hero glows and card-preview mockups tuned for the dark theme read
   as muddy smears on white — flatten them rather than port the effect. */
.hero::before, .auth-page::before { display: none; }

/* The navbar's own background is deliberately hardcoded dark in main.css
   (not a token) so it reads as one consistent brand frame across every
   page, light or dark. Its child elements still resolve --text-primary,
   --accent etc. from this file's :root though — without this scoped
   override they'd flip to dark-on-dark and become unreadable. Restore the
   original dark-theme values, but only inside .navbar. */
.navbar {
  --text-primary: #E8EEEE;
  --text-secondary: #BFC9C9;
  --text-muted: #7FA9A3;
  --border: rgba(83, 122, 121, 0.35);
  --accent: #7FA9A3;
  --accent-hover: #96C2BB;
  --c-900: #021E26;
}
.navbar .btn-primary { color: var(--c-900); }
.navbar .btn-primary:hover { color: var(--c-900); }