/**
 * Garment Printer — Shared brand tokens
 * ──────────────────────────────────────
 * Locked Eucalyptus Cool palette + Funnel typography from brief/brand-decisions.md.
 * Sourced from index-v3.html :root block (lines 20-49).
 *
 * All v3.8 homepage sections rely on these tokens via the `gp-` prefix so they
 * coexist with Dawn's --color-* variables without collision. Once theme.css
 * adopts these as Shopify color schemes, sections can drop the prefix.
 *
 * Sections that scope their own internal tokens (currently: hero-three-zone)
 * may continue to do so — those will be migrated when the global token system
 * lands. See PORT-NOTES.md for migration path.
 */

:root {
  /* Color — Precision V2 Light (heritage navy + slate + aluminum on white)
     Skin variant for review · branch skin/precision-v2-light · 2026-05-18.
     Eucalyptus values archived in git history at this branch's first commit. */
  --gp-accent:        #1B365D;   /* heritage navy — links + accents, 12.1:1 AAA on white */
  --gp-accent-ink:    #0B2545;   /* deep navy — hover state, 15.4:1 AAA on white */
  --gp-accent-mute:   #8E96A0;   /* muted slate — secondary accent */
  --gp-accent-tint:   #ECEEF1;   /* aluminum tint — backgrounds for accent blocks */
  --gp-ground:        #FFFFFF;   /* pure white canvas */
  --gp-ground-warm:   #F7F8FA;   /* off-white sections */
  --gp-ground-edge:   #ECEEF1;   /* edge / divider surfaces */
  --gp-ink:           #0B2545;   /* deep navy text + buttons */
  --gp-ink-soft:      #1B365D;   /* heritage navy h1 */
  --gp-ink-mute:      #5B6470;   /* slate body, 6.0:1 AA on white */
  --gp-hairline:      #D6D9DD;   /* aluminum hairline */
  --gp-hairline-soft: #E8EAED;
  --gp-on-ink:        #FFFFFF;

  /* ── Type · Funnel ───────────────────────────────────────────
     Tier 1 · Families (primitives) — locked in brief/brand-decisions.md */
  --gp-font-display: 'Funnel Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gp-font-text:    'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gp-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Tier 1 · Weights */
  --gp-fw-regular:  400;
  --gp-fw-medium:   500;
  --gp-fw-semibold: 600;
  --gp-fw-bold:     700;
  --gp-fw-extrabold: 800;  /* wordmark only */

  /* Tier 1 · Line-height ratios */
  --gp-lh-tight:  0.95;  /* display only */
  --gp-lh-snug:   1.1;   /* large headings */
  --gp-lh-normal: 1.2;   /* small headings, labels */
  --gp-lh-reading: 1.55; /* body text */
  --gp-lh-loose:  1.65;  /* mono/code */

  /* Tier 1 · Tracking */
  --gp-tracking-display: -0.028em;
  --gp-tracking-heading: -0.025em;
  --gp-tracking-tight:   -0.02em;
  --gp-tracking-body:    0;
  --gp-tracking-caps:    0.14em;
  --gp-tracking-mono:    0;

  /* Legacy aliases — keep existing sections working until migration sweep */
  --gp-display-weight:   var(--gp-fw-semibold);
  --gp-display-tracking: var(--gp-tracking-display);

  /* Tier 2 · Semantic typography roles
     Each role bundles size + line-height + weight + tracking via composite shorthand.
     Section CSS should reference these roles, not raw families/sizes. */

  /* Display — hero statements, marketing headlines */
  --gp-fs-display-xl: clamp(48px, 5vw, 80px);
  --gp-fs-display-lg: clamp(36px, 4vw, 56px);

  /* Headings — section titles, card heads, page nav */
  --gp-fs-heading-xl: clamp(28px, 3vw, 40px);
  --gp-fs-heading-lg: clamp(22px, 2.5vw, 32px);
  --gp-fs-heading-md: 20px;
  --gp-fs-heading-sm: 18px;

  /* Body — primary reading */
  --gp-fs-body-lg: 18px;
  --gp-fs-body-md: 16px;
  --gp-fs-body-sm: 14px;
  --gp-fs-body-xs: 12.5px;

  /* Labels — caps, eyebrows, badges, metadata */
  --gp-fs-label-lg: 14px;
  --gp-fs-label-md: 12px;
  --gp-fs-label-sm: 10.5px;

  /* Mono — code, SKUs, specs, tabular data */
  --gp-fs-mono-md: 13px;
  --gp-fs-mono-sm: 11px;

  /* Layout */
  --gp-page-max: 1280px;
  --gp-page-pad: 40px;
  --gp-gutter:   24px;

  /* Dawn settings fallbacks — referenced by base.css / section-main-product.css /
     component-accordion.css. The custom theme.liquid layout dropped Dawn's
     <style> block that derived these from settings_data, so define neutral
     defaults here to keep dependent calc() expressions valid. */
  --font-heading-scale: 1;
  --font-body-scale: 1;

  /* Spacing scale (mirrors v3.8 --b1..--b9) */
  --gp-b1: 8px;
  --gp-b2: 16px;
  --gp-b3: 24px;
  --gp-b4: 32px;
  --gp-b5: 40px;
  --gp-b6: 56px;
  --gp-b7: 72px;
  --gp-b8: 96px;
  --gp-b9: 128px;
}

/* ── Shared section primitives ─────────────────────────────────
   Used by every gp-* section to avoid duplicating page padding, head,
   and button styles. Section-specific layout still lives in each
   section's own CSS file. */

.gp-section-inner {
  max-width: var(--gp-page-max);
  margin: 0 auto;
  padding: 0 var(--gp-page-pad);
}

.gp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--gp-b6);
  gap: var(--gp-b3);
  flex-wrap: wrap;
}

.gp-section-head h2 {
  font-family: var(--gp-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.05;
  color: var(--gp-ink);
  max-width: 36ch;
  margin: 0;
}

.gp-section-head p {
  color: var(--gp-ink-soft);
  font-size: 16px;
  max-width: 36ch;
  margin: 0;
  font-family: var(--gp-font-text);
}

/* ── Buttons (shared between hero, two-cta, etc.) ── */

.gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--gp-font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid var(--gp-ink);
  background: var(--gp-ink);
  color: var(--gp-on-ink);
  transition: all 0.12s;
  cursor: pointer;
  text-decoration: none;
}

.gp-btn:hover {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: var(--gp-on-ink);
}

.gp-btn--secondary {
  background: transparent;
  color: var(--gp-ink);
}

.gp-btn--secondary:hover {
  background: var(--gp-ink);
  color: var(--gp-on-ink);
}