/* ══════════════════════════════════════════════════
   WATCHMAN FINE ARTS — Design Tokens v2
   Editorial Gallery Aesthetic
   ══════════════════════════════════════════════════ */

/* Arial-first stack — ensures identical rendering on Mac and Windows.
   Mac's Helvetica Neue has a Light (300) weight and distinct italics that
   make the site look different from Windows (which only has Arial).
   Forcing Arial first makes both platforms render the same way. */

:root {
  /* ── PALETTE ── */
  --bg:              #FFFFFF;
  --bg-warm:         #FFFFFF;
  --surface:         #FFFFFF;
  --surface-dim:     #FFFFFF;
  --border:          #E4E0DC;
  --border-light:    #EDEBE8;

  --text-primary:    #6F6F6F;
  --text-secondary:  #525252;
  --text-body:       #6B6B6B;
  --text-muted:      #8C8C8C;
  --text-subtle:     #ABABAB;

  --accent:          #C9785A;
  --accent-hover:    #B56A4E;
  --accent-light:    #F5E0D4;
  --accent-lighter:  #FBF2EC;

  --dark:            #2A2420;
  --dark-soft:       #3A3430;
  --charcoal:        #3A3A3A;

  --success:         #5A9E78;
  --error:           #C95A5A;
  --warning:         #C9A85A;

  /* ── TYPOGRAPHY ── */
  --font-display:    Arial, Helvetica, sans-serif;
  --font-body:       Arial, Helvetica, sans-serif;

  --text-hero:       clamp(3.5rem, 8vw, 7rem);
  --text-display:    clamp(2.5rem, 5vw, 4.5rem);
  --text-title:      clamp(2rem, 4vw, 3rem);
  --text-heading:    clamp(1.5rem, 2.5vw, 2rem);
  --text-subheading: 1.25rem;
  --text-base:       1rem;
  --text-sm:         0.875rem;
  --text-xs:         0.75rem;
  --text-micro:      0.68rem;

  /* ── SPACING ── */
  --space-xs:        8px;
  --space-sm:        16px;
  --space-md:        24px;
  --space-lg:        40px;
  --space-xl:        64px;
  --space-2xl:       96px;
  --space-3xl:       128px;
  --space-section:   clamp(80px, 12vw, 160px);

  /* ── LAYOUT ── */
  --nav-h:           88px;
  --container:       1280px;
  --container-narrow: 900px;
  --gutter:          clamp(24px, 4vw, 64px);

  /* ── MOTION ── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        150ms;
  --dur-normal:      300ms;
  --dur-slow:        600ms;
  --dur-reveal:      800ms;

  /* ── SHADOWS ── */
  --shadow-sm:       0 1px 3px rgba(26, 24, 22, 0.04);
  --shadow-md:       0 4px 16px rgba(26, 24, 22, 0.06);
  --shadow-lg:       0 12px 40px rgba(26, 24, 22, 0.08);
  --shadow-xl:       0 24px 64px rgba(26, 24, 22, 0.12);
}