/*
  DESIGN TOKENS — OrchestraInstruments.com
  Implements Master Brief v3.1 Section 6.4 (Visual direction).
  These custom properties are the single source of truth for color, type,
  spacing and radii across every mockup. When this design is approved and
  converted to Elementor (Roadmap Phase 5), this file maps directly to:
    - color values      -> Elementor Global Colors
    - font families      -> Elementor Global Fonts
    - --space-*, --radius-* -> Elementor Global Widget spacing/shape settings
  Do not hard-code a color, font, or spacing value anywhere else in the
  mockups; reference a token instead, exactly as an Elementor build would
  reference the Global Kit rather than per-widget overrides (Section 12.3).
*/

:root {
  /* ---- Color: parchment / charcoal / walnut / brass ---- */
  --color-bg:            #FAF5EA;   /* warm ivory/parchment page background */
  --color-bg-alt:        #F1E9D8;   /* deeper parchment, alternating sections */
  --color-surface:       #FFFDF8;   /* card / raised surface */
  --color-ink:           #26221C;   /* charcoal — primary text */
  --color-ink-soft:      #55503F;   /* muted charcoal — secondary text */
  --color-ink-faint:     #8A8271;   /* tertiary text, captions, meta */
  --color-walnut:        #4A3324;   /* dark wood accent */
  --color-walnut-deep:   #2E2018;   /* deepest wood — footer background */
  --color-brass:         #9C7A3C;   /* brass/gold accent — links, highlights */
  --color-brass-deep:    #7C5E28;   /* brass hover/active state */
  --color-brass-soft:    #E6D6AE;   /* brass tint — badges, subtle fills */
  --color-line:          #E1D5B8;   /* hairline borders on parchment */
  --color-line-deep:     #C9B98D;   /* stronger border / divider */
  --color-verified:      #4B6B4E;   /* muted sage — verification / trust, not neon green */
  --color-verified-bg:   #E4EBE1;
  --color-caution:       #8A5A2B;   /* muted amber — safety/caution callouts, not alarm red */
  --color-caution-bg:    #F3E7D6;
  --color-focus:         #1D3A5F;   /* high-contrast focus ring, distinct from brass for a11y */
  --color-white:         #FFFFFF;

  /* ---- Richer accent set (v1.1 — added for visual density pass, still within
     Section 6.4's palette family: no aggressive red, no neon, no rainbow
     gradients). Used for CTA emphasis, ribbon variety on product cards, and
     hero depth — never as a substitute for real photography or real data. ---- */
  --color-brass-rich:    #B8903E;   /* more saturated gold — CTA gradients, hero accents */
  --color-jewel:         #6E2A2E;   /* deep oxblood — used sparingly, ribbons only, never CTAs */
  --color-jewel-deep:    #4E1E20;
  --color-forest:        #3F5B45;   /* deep green — "value/program pick" ribbons */
  --color-forest-deep:   #2C4231;
  --gradient-cta:        linear-gradient(135deg, var(--color-brass-rich) 0%, var(--color-brass-deep) 100%);
  --gradient-hero:       radial-gradient(120% 140% at 15% 10%, var(--color-brass-soft) 0%, var(--color-bg-alt) 45%, var(--color-bg) 100%);
  --gradient-panel:      linear-gradient(160deg, var(--color-walnut) 0%, var(--color-walnut-deep) 100%);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Source Sans 3", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.9375rem;   /* 15px */
  --text-base: 1.0625rem;   /* 17px — body copy, deliberately above the 16px default for editorial legibility */
  --text-md:   1.25rem;     /* 20px */
  --text-lg:   1.625rem;    /* 26px */
  --text-xl:   2.125rem;    /* 34px */
  --text-2xl:  2.75rem;     /* 44px */
  --text-3xl:  3.5rem;      /* 56px */

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  /* ---- Spacing scale (4px base unit) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* ---- Shape ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(38, 34, 28, 0.06), 0 1px 1px rgba(38, 34, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(38, 34, 28, 0.08), 0 2px 4px rgba(38, 34, 28, 0.05);
  --shadow-lg: 0 12px 32px rgba(38, 34, 28, 0.12), 0 4px 8px rgba(38, 34, 28, 0.06);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: var(--space-5);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* Respect reduced-motion preference (Section 23 accessibility target) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}