/* =========================================================
   JA & MESON MARKETING — DESIGN TOKENS
   Warm premium trust: deep navy + gold + cream
   ========================================================= */

:root {
  /* ── COLORS ── */
  --color-navy:         #0d1b3e;
  --color-navy-mid:     #162550;
  --color-navy-light:   #1e3160;
  --color-navy-pale:    #e8edf5;

  --color-gold:         #c9a84c;
  --color-gold-light:   #dfc070;
  --color-gold-bright:  #f0d080;
  --color-gold-dim:     #9a7a2e;
  --color-gold-bg:      rgba(201,168,76,0.08);
  --color-gold-border:  rgba(201,168,76,0.25);
  --color-gold-border-mid: rgba(201,168,76,0.45);

  --color-cream:        #fafaf7;
  --color-cream-warm:   #f5f1e8;
  --color-cream-deep:   #ede9df;
  --color-parchment:    #f0ece1;

  --color-white:        #ffffff;
  --color-text:         #2c3a52;
  --color-text-mid:     #4a5568;
  --color-text-muted:   #7a8899;
  --color-text-faint:   #a8b4c2;
  --color-border:       rgba(13,27,62,0.10);
  --color-border-mid:   rgba(13,27,62,0.18);

  /* ── TYPOGRAPHY ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-heading:  'DM Sans', 'Inter', sans-serif;
  --font-body:     'DM Sans', 'Inter', sans-serif;
  --font-mono:     'DM Mono', 'JetBrains Mono', monospace;

  /* Type scale */
  --text-xs:    0.72rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.5rem;
  --text-hero:  clamp(3rem, 6vw, 5.5rem);
  --text-display: clamp(3.5rem, 7vw, 6.5rem);

  /* ── SPACING ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── LAYOUT ── */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --nav-height: 76px;
  --section-pad: clamp(4rem, 8vw, 8rem);

  /* ── RADIUS ── */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── TRANSITIONS ── */
  --transition-fast:  180ms ease;
  --transition-base:  280ms ease;
  --transition-slow:  500ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── SHADOWS ── */
  --shadow-sm:    0 2px 8px rgba(13,27,62,0.08);
  --shadow-md:    0 4px 20px rgba(13,27,62,0.12);
  --shadow-lg:    0 8px 40px rgba(13,27,62,0.16);
  --shadow-gold:  0 4px 24px rgba(201,168,76,0.25);
}