/* ============================================================
   THE CHAPEL AT WIMBERLEY — Design Tokens
   Single source of truth for all design values.
   ============================================================ */

/* Bacalisties — local/licensed calligraphy font */
@font-face {
  font-family: 'Bacalisties';
  src: url('../fonts/Bacalisties.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sebastian';
  src: url('../fonts/sebastian_bobby_alt_slanted-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=EB+Garamond:ital,wght@0,400;1,400&family=Lato:wght@300;400;700&display=swap');

:root {
  /* ── Colors ── */
  --color-cream:        #faf7f2;
  --color-ivory:        #f5f0e8;
  --color-white:        #ffffff;
  --color-sage:         #7a8c72;
  --color-sage-dark:    #5e6e58;
  --color-gold:         #b89a5e;
  --color-gold-light:   #d4b97a;
  --color-charcoal:     #2c2c2c;
  --color-mid:          #5a5a5a;
  --color-border:       #e2d9cc;
  --color-overlay:      rgba(18, 14, 10, 0.50);

  /* ── Typography ── */
  --font-display:   'Bacalisties', cursive;
  --font-heading:   'Playfair Display', Georgia, serif;
  --font-subhead:   'EB Garamond', Georgia, serif;
  --font-body:      'Lato', system-ui, sans-serif;

  /* ── Font sizes ── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-hero:  clamp(36px, 6vw, 72px);

  /* ── Spacing ── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* ── Layout ── */
  --max-width:         1200px;
  --content-width:     780px;
  --header-height:     72px;
  --header-height-mobile: 60px;

  /* ── Transitions ── */
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  200ms;
  --duration-base:  350ms;
  --duration-slow:  600ms;

  /* ── Shadows ── */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-header: 0 2px 16px rgba(0, 0, 0, 0.08);

  /* ── Border radius ── */
  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg:  12px;
}