/* Jakt Outfitters theme: THIS SITE's colors, fonts and geometry. The only place they
   are defined. Palette "Balanced" (olive + bone + rust), design handoff 2026-07-19
   (Support Files/DESIGN_HANDOFF_jakt_rebrand.md).

   Jakt is a LIGHT site (bone page) with DARK chrome (olive header, footer, home hero).
   Token meanings are documented in the upstream copy of this file:
   - Page tokens (--bg, --text, --ink-rgb...) are the page body.
   - --chrome-* tokens are the header, footer and home hero.
   - *-rgb tokens are "r,g,b" for translucent use.
   - --ink-rgb is the page's text colour for hairlines/overlays (dark on this light site).
   - --on-accent is text on accent/success fills.                               */

:root {
  /* ── Page surfaces ─────────────────────────────────────────────── */
  --bg:            #F4EFE1;   --bg-rgb:  244,239,225;
  --bg-2:          #FBF7EC;   /* raised band: dropdowns, alternate sections */
  --surface:       #FBF7EC;   /* wells, inputs, image frames */
  --surface-2:     #EFE8D6;   /* image well behind article/guide heroes */
  --surface-deep:  #EDE5CF;   /* gradient end on About */
  --card:          #FFFFFF;
  --hover-bg:      #FBF7EC;   /* icon-button hover */

  /* ── Ink on the page ───────────────────────────────────────────── */
  --text:          #4A4A3A;   --text-rgb: 74,74,58;     /* body copy */
  --text-2:        #4A4A3A;
  --text-3:        #5C5B49;
  --text-strong:   #2A3320;   /* headings / emphasis (olive ink) */
  --muted:         #66654F;   /* 5.2:1 on page (was #8A8874, 3.1:1) */
  --muted-2:       #6E6C58;   /* 4.6:1 (was #A9A690, 2.1:1) */
  --ink-rgb:       42,51,32;
  --border:        #E3DCC6;
  --border-2:      rgba(42,51,32,0.08);

  /* ── Accent (rust) ─────────────────────────────────────────────── */
  /* Shared code uses --accent for small text as well as fills, so it is the
     darker rust #A5501F (4.85:1 on bone, white on it 5.57:1). The logo rust
     #C4622D is 3.56:1 on bone and white on it 4.09:1. */
  --accent:        #A5501F;   --accent-rgb: 165,80,31;
  --accent-soft:   rgba(165,80,31,0.12);
  --accent-2:      #A5501F;   /* links, hover text */
  --accent-3:      #A5501F;   /* accent text on a tinted chip */
  --accent-strong: #A5501F;   --accent-strong-rgb: 165,80,31;
  --on-accent:     #FFFFFF;
  --highlight:     #8A6100;   --highlight-rgb: 138,97,0;    /* ratings, "our take" */
  --highlight-2:   #C4622D;

  /* ── Status (tuned for contrast on a light page) ───────────────── */
  --success:        #2A7230;  --success-rgb: 42,114,48;   /* 5.2:1 on bone (was #2F7D32, 4.46:1) */
  --success-2:      #2A7230;
  --success-3:      #2A7230;  --success-3-rgb: 42,114,48;
  --success-strong: #25632A;
  --success-deep:   #E6F0E4;
  --error:          #B3261E;  --error-rgb: 179,38,30;
  --error-2:        #B3261E;
  --error-3:        #B3261E;
  --warn:           #8A6100;  --warn-rgb: 138,97,0;
  --warn-2:         #8A6100;
  --warn-3:         #8A6100;  --warn-3-rgb: 138,97,0;
  --violet:         #6A4FB0;  --violet-rgb: 106,79,176;
  --purple:         #7E4AA8;  --purple-rgb: 126,74,168;

  /* Light stock/source chips */
  --chip-success-bg:   #E6F0E4;  --chip-success-text: #2A7230;
  --chip-warn-bg:      #FBF0D9;  --chip-warn-text:    #8A6100;
  --chip-neutral-bg:   #EFE8D6;  --chip-neutral-text: #6B6A57;

  /* Special-order notice/badge */
  --special-bg:    #FBF0D9;
  --special-edge:  #8A6100;
  --special-text:  #6B4B00;
  --special-muted: #8A6100;

  /* ── Chrome: header, footer, home hero (dark olive, bone ink) ──── */
  --chrome-bg:          #2A3320;
  --chrome-bg-rgb:      42,51,32;
  --chrome-bg-2:        #222A1A;
  --chrome-footer-bg:   #2A3320;
  --chrome-text:        #D9C89E;
  --chrome-text-2:      #BFB28C;
  --chrome-text-strong: #FBF7EC;
  --chrome-muted:       #ADA584;   /* 5.3:1 on olive (was #9A9275, 4.2:1) */
  --chrome-ink-rgb:     251,247,236;   /* bone, not tan: shared CSS uses it at 20-55% alpha for footer/hero text */
  --chrome-border:      rgba(217,200,158,0.22);
  --chrome-hover-bg:    #222A1A;
  --chrome-accent:      #E58550;   /* rust text on olive, 4.9:1 (Jakt-only token, used below) */

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-body:     'Barlow', sans-serif;
  --font-display:  'Oswald', sans-serif;

  /* ── Geometry + depth: buttons 3px, cards 5px, wells 6px ──────── */
  --radius:      3px;
  --radius-lg:   5px;
  --radius-xl:   6px;
  --shadow-rgb:  42,51,32;
  --shadow:      0 1px 2px rgba(42,51,32,0.06);
  --shadow-md:   0 4px 12px rgba(42,51,32,0.09);
  --shadow-lg:   0 10px 28px rgba(42,51,32,0.13);

  /* Home category tiles: earthy hues (rust → olive), one per tile, in order */
  --tile-hues:   22 80 38 95 28 65 50 100 18 85;
}

/* ── Jakt logo: an image lockup instead of the upstream inline mark + wordmark ── */
.logo-lockup { height: 66px; width: auto; display: block; }
.footer .logo-lockup, .footer-brand .logo-lockup { height: 46px; }
@media (max-width: 640px) { .logo-lockup { height: 48px; } }
.logo-panel .logo-lockup { height: 100px; }
.wordmark-lockup { height: 44px; width: auto; display: block; }
.login-logo .wordmark-lockup { height: 64px; margin: 0 auto; }

/* ── Admin: stronger contrast for small, dense UI text ─────────────────────
   The admin shows text at 10-12 px on labels and tables, so its body text and
   borders are a step darker than the storefront's. (--muted and --muted-2 are
   already AA on the storefront.)                                            */
.admin {
  --text:     #3A3A2C;   /* 10.0:1 on page */
  --text-2:   #3A3A2C;
  --text-3:   #4A4A3A;   /*  7.8:1 */
  --border:   #D5CCB0;   /* table rows and cards separate visibly */
  --border-2: rgba(42,51,32,0.14);
}

/* ── Storefront: readable text on a light page ─────────────────────────────
   Shared CSS and pages colour secondary text as ink at 20-65% alpha. That was
   tuned on a dark site; on the bone page it lands at 1.4-4.2:1. These rules
   swap in solid tokens that pass WCAG AA (4.5:1). theme.css loads before
   site.css, so each selector carries :root to win; hover/active rules in the
   shared files still apply. Inline style="" colours need !important.        */

/* labels, dates, counts, captions → --muted (5.2:1) */
:root .trust-label,
:root .trust-brands span, :root .trust-brands a,
:root .cat-arrow,
:root .article-date,
:root .sidebar-heading,
:root .article-error p,
:root .form-group label,
:root .form-note,
:root .guides-count,
:root .guides-filter-btn,
:root .guides-empty,
:root .rate-table th,
:root .policy-note { color: var(--muted); }
[style*="color:rgba(var(--ink-rgb),0.4)"] { color: var(--muted) !important; }
[style*="color:rgba(var(--success-rgb),0.7)"] { color: var(--success) !important; }

/* sentences and paragraphs → --text-3 (6.0:1) */
:root .value-item p,
:root .article-summary,
:root .article-card-summary,
:root .guide-feature-summary,
:root .article-body .art-blockquote,
:root .contact-hero p,
:root .contact-info-card p,
:root .policy-hero p,
:root .policy-section p, :root .policy-section li,
:root .policy-steps li,
:root .policy-contact-box p,
:root .ship-highlight p { color: var(--text-3); }

/* small rust text on the page → --accent-2 (4.9:1; --accent is 3.6:1) */
:root .see-all,
:root .detail-brand { color: var(--accent-2); }

/* rust text on a rust-tinted chip → olive ink */
:root .guides-filter-btn.active,
:root .policy-section h2 .section-num { color: var(--text-strong); }

/* footer and header (olive) */
:root .footer-col h5 { color: var(--chrome-text-2); }
:root .footer-brand p,
:root .footer-social a,
:root .footer-col a,
:root .footer-bottom p { color: var(--chrome-muted); }
.footer-bottom a[style] { color: var(--chrome-text-2) !important; }
:root .nav-links a:hover { color: var(--chrome-text-strong); }
:root .hero-title em,
:root .hero .btn-ghost,
:root .nav-toggle:hover,
:root .nav-search:hover, :root .nav-cart:hover { color: var(--chrome-accent); }