/* ==========================================================================
   Dahlonega Armory — design tokens
   Source of truth: Creation Station job 20260902-234359_refine_b3486
                    (design.tokens.css), generated from damockupapproved.png.

   Loaded by includes/header.php's brand-*.css glob, after theme.css, in the
   documented order brand-10 -> brand-20 (tokens) -> brand-30 (chrome).
   The previous skin (built to the Aug-19 mockupv1) is parked beside this file
   as brand-20-dahlonega.css.bak-mockupv1-20260903; it used a different navy
   (#02162D), gold (#FFD644) and red (#A10000) and restyled .main-nav and the
   footer UNSCOPED, so it cannot be loaded alongside this one.

   TWO DELIBERATE DEVIATIONS from the generated tokens, both for WCAG AA and
   both invisible in the static comp (they only affect text-on-white states
   the comp never shows):
     --color-muted     #777777 -> #6E6E6E   (4.48:1 FAIL -> 5.10:1 PASS)
                       used for the struck MSRP line on white cards.
     --color-gold-ink  new token #8A5F00    (5.65:1 PASS)
                       gold-dark #D99C00 measured 2.41:1 on white, so it is
                       kept for NON-TEXT use only; any gold used AS TEXT on a
                       white surface (link hover) resolves to --color-gold-ink.
   Measured ratios: gold-on-navy 8.57:1, white-on-navy 14.64:1,
   price-red-on-white 5.44:1, ink-navy-on-white 17.43:1.
   ========================================================================== */

:root {
  --color-navy: #002B46;
  --color-navy-dark: #001C31;
  --color-navy-deep: #001322;
  --color-ink-navy: #071A33;
  --color-ink: #111111;
  --color-white: #FFFFFF;
  --color-page: #FFFFFF;
  --color-gold: #FDBB00;
  --color-gold-dark: #D99C00;   /* non-text: rules, borders, icon fills */
  --color-gold-ink: #8A5F00;    /* gold AS TEXT on white — AA compliant */
  --color-price-red: #D60000;
  --color-border: #E5E5E5;
  --color-border-strong: #D6D6D6;
  --color-muted: #6E6E6E;
  --color-muted-light: #D9D9D9;
  --color-skeleton: #F1F1F1;
  --color-skeleton-shine: #FAFAFA;
  --color-error: #B00020;
  --color-success: #167A3A;

  --font-body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-heading: "Oswald", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --text-3xl: 30px;
  --text-4xl: 34px;

  --line-tight: 1;
  --line-heading: 1.15;
  --line-body: 1.45;
  --line-relaxed: 1.6;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 24px rgba(0, 28, 49, 0.14);
  --shadow-focus: 0 0 0 3px rgba(253, 187, 0, 0.28);
  --shadow-header-glow: 0 0 90px rgba(255, 255, 255, 0.08);

  --breakpoint-mobile: 375px;
  --breakpoint-mobile-check: 390px;
  --breakpoint-sm: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide-check: 1536px;

  --container-sm: 100%;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1280px;

  --header-desktop-height: 304px;
  --search-nav-desktop-height: 96px;
  --category-nav-desktop-height: 76px;
  --benefits-desktop-height: 144px;

  --touch-target: 44px;
}