/* ==========================================================================
   NCM Embroidery & Sportswear — Design Tokens
   Concept: "The Thread & The Press"
   Palette derived from Navy & Gold Service, warmed for a textile workshop feel.
   ========================================================================== */

:root {
  /* ---------- Color: Core ---------- */
  --c-ink: #111A2E;          /* Ink Navy — headers, footer, primary dark   */
  --c-ink-700: #1B2740;
  --c-ink-500: #2A3552;
  /* Thread Gold, AA-verified:
     --c-gold        4.61:1 on canvas, and 5.20:1 behind white button text
     --c-gold-mid    decorative only (borders, icons, rules) — never text on canvas
     --c-gold-bright 7.11:1 on ink — for text on DARK backgrounds only          */
  --c-gold: #8E6526;
  --c-gold-mid: #B8873B;
  --c-gold-bright: #C8A055;
  --c-gold-soft: #E4CFA3;
  --c-canvas: #F5F1E8;       /* Raw Canvas — page background (never #fff)  */
  --c-canvas-deep: #EBE5D8;
  --c-surface: #FDFBF6;      /* Card surface                               */
  --c-charcoal: #2A2E38;     /* Body text — 11.4:1 on canvas               */
  --c-stone: #5F5A4E;        /* Secondary text — 6.2:1 on canvas (AA)      */
  --c-crimson: #9B2C2C;      /* Spool Crimson — sparing accent             */
  --c-border: #DDD5C4;

  /* ---------- Color: On-dark ---------- */
  --c-on-dark: #F5F1E8;
  --c-on-dark-muted: #B9B2A2;

  /* ---------- Type scale (fluid) ---------- */
  --f-display: "Bitter", "Georgia", "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-hero: clamp(2.75rem, 7vw, 6rem);
  --t-h1: clamp(2.25rem, 5vw, 4rem);
  --t-h2: clamp(1.75rem, 3.6vw, 2.85rem);
  --t-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --t-lead: clamp(1.075rem, 1.5vw, 1.3rem);
  --t-body: 1rem;      /* 16px floor on mobile */
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;

  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --ls-eyebrow: 0.18em;

  /* ---------- Spacing ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1280px;
  --maxw-text: 68ch;

  /* ---------- Radii ---------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- Multi-layer shadows (2-3 stacked, never flat) ---------- */
  --sh-1: 0 1px 2px rgba(17, 26, 46, .07), 0 3px 8px rgba(17, 26, 46, .05);
  --sh-2: 0 2px 4px rgba(17, 26, 46, .08), 0 8px 20px rgba(17, 26, 46, .07),
          0 24px 48px rgba(17, 26, 46, .05);
  --sh-3: 0 3px 6px rgba(17, 26, 46, .10), 0 14px 32px rgba(17, 26, 46, .10),
          0 40px 72px rgba(17, 26, 46, .08);
  --sh-gold: 0 4px 14px rgba(142, 101, 38, .30), 0 12px 32px rgba(142, 101, 38, .20);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---------- Motion ---------- */
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-inout: cubic-bezier(.65, .05, .36, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 160ms; --d-mid: 260ms; --d-slow: 420ms;

  /* ---------- Z-index scale (per UX rule) ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-dropdown: 300;
  --z-overlay: 999;
  --z-toast: 9999;

  /* ---------- Glass (light-mode calibrated, not bg-white/10) ---------- */
  --glass-bg: rgba(253, 251, 246, .82);
  --glass-bg-strong: rgba(253, 251, 246, .93);
  --glass-border: rgba(142, 101, 38, .24);
  --glass-blur: blur(16px) saturate(1.4);
}

/* Woven canvas texture — layered gradients, no image request */
.texture-weave {
  background-image:
    repeating-linear-gradient(90deg, rgba(17,26,46,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(17,26,46,.022) 0 1px, transparent 1px 3px);
}