/* ============================================================
   SHARPWORK — SHARED DESIGN TOKENS  (single source of truth)
   Linked by every marketing page. Change a color/space/type/
   contrast value HERE and it propagates site-wide.
   Per-page SKU theming stays inline (overrides --sw-coral etc.).
   ============================================================ */
:root {
  /* Surface */
  --sw-cream:        #F8F1E1;
  --sw-cream-2:      #F1E7CF;
  --sw-cream-3:      #FFFBF1;

  /* Text */
  --sw-ink:          #221C14;
  --sw-ink-2:        #5D5448;
  --sw-ink-3:        #6A6050;

  /* Coral — primary action */
  --sw-coral:        #DE7E5C;
  --sw-coral-deep:   #B25636;
  --sw-coral-soft:   rgba(222, 126, 92, 0.10);

  /* Sage — verification */
  --sw-sage:         #7A9577;
  --sw-sage-soft:    rgba(122, 149, 119, 0.12);

  /* Butter — accent, sparingly */
  --sw-butter:       #F0C46B;

  /* Warm darks — dark "interlude" stage (eyes-first monument). See DESIGN-DOCTRINE.md §2. */
  --sw-ink-stage:    #1B1610;
  --sw-page-night:   #14100A;

  /* Rules */
  --sw-rule:         rgba(34, 28, 20, 0.10);
  --sw-rule-strong:  rgba(34, 28, 20, 0.18);

  /* Typography */
  --sw-font-display: 'Outfit', system-ui, sans-serif;
  --sw-font-mono:    'Geist Mono', ui-monospace, monospace;
  --sw-font-italic:  'Newsreader', Georgia, serif;

  /* Weights */
  --sw-w-light:  300;
  --sw-w-reg:    400;
  --sw-w-med:    500;
  --sw-w-semi:   600;

  /* Type scale */
  --sw-fs-display-xl: 72px;
  --sw-fs-display-md: 44px;
  --sw-fs-display-sm: 32px;
  --sw-fs-display-xs: 24px;
  --sw-fs-body-lg:   18px;
  --sw-fs-body:      15px;
  --sw-fs-body-sm:   13.5px;
  --sw-fs-caption:   12px;
  --sw-fs-micro:     10px;

  /* Tracking */
  --sw-tr-display:   -0.035em;
  --sw-tr-h2:        -0.025em;
  --sw-tr-mono-caps:  0.14em;

  /* Leading */
  --sw-lh-display:   0.98;
  --sw-lh-body:      1.55;

  /* Spacing — 4px grid */
  --sw-s-1:   4px;
  --sw-s-2:   8px;
  --sw-s-3:  12px;
  --sw-s-4:  16px;
  --sw-s-5:  20px;
  --sw-s-6:  24px;
  --sw-s-8:  32px;
  --sw-s-10: 40px;
  --sw-s-12: 48px;
  --sw-s-14: 56px;
  --sw-s-16: 64px;
  --sw-s-20: 80px;
  --sw-s-24: 96px;

  /* Radii */
  --sw-r-xs:    2px;
  --sw-r-sm:    4px;
  --sw-r-md:    8px;
  --sw-r-lg:   14px;
  --sw-r-xl:   18px;
  --sw-r-pill: 999px;

  /* Shadows */
  --sw-shadow-card: 0 18px 36px -18px rgba(80,50,20,0.22), 0 2px 6px rgba(80,50,20,0.06);
  --sw-shadow-doc:  0 26px 50px -22px rgba(60,40,15,0.32), 0 4px 12px rgba(60,40,15,0.08);
  --sw-shadow-float: 0 30px 50px -16px rgba(80,45,15,0.50), 0 6px 16px rgba(80,45,15,0.14);
  --sw-shadow-cta:  0 4px 0 #8E4427, 0 12px 24px -8px rgba(178,86,54,0.40);

  /* Motion */
  --sw-ease:     cubic-bezier(0.2, 0, 0, 1);
  --sw-dur-fast: 150ms;

  /* Layout */
  --sw-page-max:    1320px;
  --sw-page-pad-x:   48px;

  /* Section vertical rhythm */
  --sw-section-py: 96px;

  /* SKU Accent Palette */
  --sku-legal:       #DE7E5C;  --sku-legal-deep:  #B25636;
  --sku-pm:          #7A9577;  --sku-pm-deep:     #5A7357;
  --sku-sales:       #C4953A;  --sku-sales-deep:  #8E671C;
  --sku-pr:          #8E6DB4;  --sku-pr-deep:     #6B4C92;
  --sku-acct:        #4E8FA8;  --sku-acct-deep:   #2F6E8A;
}

/* Responsive token overrides (shared across storefront pages) */
@media (max-width: 1024px) { :root {
    --sw-fs-display-xl: 56px;
    --sw-fs-display-md: 36px;
    --sw-page-pad-x:    32px;
    --sw-section-py:    72px;
  } }
@media (max-width: 860px) { :root { --sw-page-pad-x: 24px; } }
@media (max-width: 720px) { :root {
    --sw-fs-display-xl: 40px;
    --sw-fs-display-md: 28px;
    --sw-page-pad-x: 20px;
    --sw-section-py: 56px;
  } }
@media (max-width: 375px) { :root {
    --sw-fs-display-xl: 36px;
    --sw-page-pad-x: 16px;
  } }


/* Footer link-map gap repair (visual sweep 2026-07-01, A4): every page's inline
   footer CSS sets `gap: var(--sw-s-7) var(--sw-s-6)` at ≤860px, but --sw-s-7 was
   never defined, so the whole gap declaration is invalid and collapses to 0 —
   group eyebrows visually bind to the previous group's links. Repaired here at
   higher specificity than the inline rule; 28px = the missing s-7 step.
   Deliberately NOT defining --sw-s-7: home references it elsewhere with divergent
   fallbacks (36px / 28px) that would visibly shift if the token existed. */
@media (max-width: 860px) {
  footer.sw-footer div.sw-footer__map { gap: 28px var(--sw-s-6); }
}

/* Mobile-only account entry: desktop uses the text "Sign in" in .sw-nav__links;
   under 720px that group is hidden, so show a 44px account icon beside the buy CTA. */
.sw-nav__signin-m { display: none; }
@media (max-width: 720px) {
  .sw-nav > .sw-wordmark { margin-right: auto; }
  .sw-nav__signin-m {
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 12px; width: 44px; height: 44px; color: var(--sw-ink-2);
  }
  .sw-nav__signin-m:hover { color: var(--sw-ink); }
}