/* ==========================================================================
   CSS Variables — Étude Lubishtani
   ========================================================================== */

:root {
  /* Colors */
  --color-bg: #FAFAF8;
  --color-black: #1A1A1A;
  --color-border: #E0DCD7;
  --color-primary: #6D071A;
  --color-secondary: #9C824A;
  --color-shadow: #E8E4DF;
  --color-text: #555555;
  --color-third: #F2EFEB;
  --color-trans: transparent;
  --color-white: #FFFFFF;

  /* Spaces */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 20px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 80px;
  --space-4xl: 120px;
  --space-container: 1320px;
  --space-section: 160px;

  /* Fonts — Switch heading font here */
  /* --font-heading: 'ITC Blair', system-ui, sans-serif; */
  --font-heading: 'Bebas Neue', system-ui, sans-serif;

  /* Typography */
  --h1: clamp(2.2rem, 1.27vi + 1.94rem, 2.96rem);
  --h2: clamp(1.76rem, 0.77vi + 1.6rem, 2.22rem);
  --h3: clamp(1.41rem, 0.43vi + 1.32rem, 1.67rem);
  --h4: clamp(1.13rem, 0.21vi + 1.08rem, 1.25rem);
  --h5: clamp(0.9rem, 0.06vi + 0.89rem, 0.94rem);
  --h6: clamp(0.72rem, -0.03vi + 0.73rem, 0.7rem);
  --text-xl: clamp(1.27rem, 0.59vi + 1.15rem, 1.62rem);
  --text-l: clamp(1.13rem, 0.37vi + 1.05rem, 1.35rem);
  --text-m: clamp(1rem, 0.21vi + 0.96rem, 1.13rem);
  --text-s: clamp(0.89rem, 0.08vi + 0.87rem, 0.94rem);
  --text-xs: clamp(0.79rem, -0.01vi + 0.79rem, 0.78rem);
}