/* =========================================================
   WAEL Barbershop — Colors & Type
   Design tokens for the WAEL brand.
   Vibe: warm, dark, refined. Editorial. Old-world barbershop
   with modern craftsmanship. Cream + deep brown + gold accent.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Brand Palette ---------- */
  --wael-cream:      #f5efe4;
  --wael-dark:       #1a1510;
  --wael-brown:      #3d2817;
  --wael-gold:       #c9a961;
  --wael-gold-soft:  #d9bd82;
  --wael-muted:      #7a6a55;

  /* ---------- Extended Neutrals ---------- */
  --wael-cream-100:  #fbf7ef;
  --wael-cream-200:  #f5efe4;
  --wael-cream-300:  #ece3d1;
  --wael-cream-400:  #ddd0b6;
  --wael-stone-500:  #7a6a55;
  --wael-stone-700:  #4b3b28;
  --wael-stone-800:  #3d2817;
  --wael-stone-900:  #1a1510;

  /* ---------- Semantic ---------- */
  --bg:           var(--wael-cream);
  --bg-raised:    #fffaf0;
  --bg-inverse:   var(--wael-dark);
  --surface-dark: var(--wael-dark);
  --fg1:          var(--wael-dark);
  --fg2:          var(--wael-brown);
  --fg3:          var(--wael-muted);
  --fg-on-dark1:  var(--wael-cream);
  --fg-on-dark2:  rgba(245, 239, 228, 0.85);
  --fg-on-dark3:  rgba(245, 239, 228, 0.55);

  /* ---------- Accent ---------- */
  --accent:            var(--wael-gold);
  --accent-hover:      var(--wael-gold-soft);
  --accent-on-dark:    var(--wael-gold);
  --accent-on-light:   var(--wael-gold);

  /* ---------- Borders ---------- */
  --border-light:      rgba(61, 40, 23, 0.12);
  --border-med:        rgba(61, 40, 23, 0.2);
  --border-gold:       rgba(201, 169, 97, 0.3);
  --border-gold-soft:  rgba(201, 169, 97, 0.15);
  --border-on-dark:    rgba(245, 239, 228, 0.15);

  /* ---------- Type ---------- */
  --font-serif:   'Playfair Display', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:   clamp(48px, 8vw, 96px);
  --fs-h1:        clamp(40px, 6vw, 72px);
  --fs-h2:        clamp(36px, 5vw, 56px);
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-lead:      19px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;
  --fs-eyebrow:   13px;
  --fs-stat:      44px;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  --tr-tight:   -0.01em;
  --tr-normal:   0;
  --tr-label:   0.05em;
  --tr-eyebrow: 0.3em;
  --tr-brand:   0.2em;

  --lh-display: 0.95;
  --lh-heading: 1.05;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  /* ---------- Spacing ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  120px;
  --gutter:    48px;
  --container: 1200px;
  --container-narrow: 900px;

  /* ---------- Radii ---------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-image: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-card:  0 4px 24px rgba(26, 21, 16, 0.08);
  --shadow-soft:  0 2px 12px rgba(26, 21, 16, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:    cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:      0.2s;
  --dur-med:       0.4s;
  --dur-slow:      0.7s;
  --dur-mask:      0.9s;

  --grain-opacity: 0.035;
}