:root {
  /* ─── Colors (from Figma) ─── */
  --color-red:         #910317;
  --color-red-hover:   #7a0213;
  --color-dark:        #2b2b18;
  --color-dark-hover:  #1e1e10;
  --color-cream:       #f5f0ea;
  --color-gray-bg:     #d9d9d9;
  --color-white:       #ffffff;
  --color-black:       #000000;
  --color-text:        #000000;
  --color-text-light:  #444444;
  --color-gray-mid:    #666666;
  --color-overlay:     rgba(0, 0, 0, 0.45);
  --color-border:      #e0e0e0;

  /* ─── Typography (from Figma) ─── */
  /* Sexsmith (local) + Cormorant Garamond fallback */
  --font-display:  'Sexsmith', 'Cormorant Garamond', Georgia, serif;
  /* ZT Formom italic (local) + fallback */
  --font-accent:   'ZT Formom', 'Cormorant Garamond', Georgia, serif;
  /* Body → Helvetica Neue (local from static/fonts) */
  --font-body:     'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Buttons → Inter (Google Fonts) */
  --font-ui:       'Inter', 'Helvetica Neue', sans-serif;

  /* ─── Font Sizes (pixel-exact from Figma) ─── */
  --fs-display:    clamp(80px, 11vw, 215px);  /* "UKRAINIAN COLLEGE" */
  --fs-display-md: clamp(60px, 8vw, 131px);   /* "VETERINARY NUTRITION" */
  --fs-display-sm: clamp(48px, 6vw, 111px);   /* Section headings */
  --fs-hero:       clamp(48px, 6vw, 92px);
  --fs-h1:         clamp(36px, 4.5vw, 77px);
  --fs-h2:         clamp(28px, 3.5vw, 64px);  /* Expertise card titles */
  --fs-h3:         clamp(22px, 2.5vw, 36px);
  --fs-h4:         clamp(18px, 1.5vw, 24px);
  --fs-body:       18px;
  --fs-body-lg:    20px;
  --fs-body-md:    16px;
  --fs-small:      15px;
  --fs-xs:         14px;
  --fs-nav:        20px;  /* From Figma: navigation links */
  --font-size-xs:  var(--fs-xs);
  --font-size-sm:  var(--fs-small);
  --font-size-base: var(--fs-body-md);

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

  --lh-tight:   1.0;
  --lh-heading: 1.1;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* ─── Spacing ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Space aliases (for templates) ─── */
  --space-2:  var(--sp-2);
  --space-3:  var(--sp-3);
  --space-5:  var(--sp-5);
  --space-6:  var(--sp-6);
  --space-10: var(--sp-10);
  --space-16: var(--sp-16);

  /* ─── Layout ─── */
  --container:       1440px;
  --container-inner: 1282px;
  --pad-desktop:     79px;     /* From Figma: left margin = 79px */
  --pad-mobile:      24px;

  /* ─── Borders ─── */
  --radius-sm:   4px;
  --radius-md:   5px;   /* From Figma: rounded-[5px] */
  --radius-lg:   16px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* ─── Buttons (from Figma) ─── */
  --btn-h:      50px;
  --btn-h-sm:   40px;
  --btn-radius: 50px;  /* From Figma: rounded-[50px] */

  /* ─── Transitions ─── */
  --ease:      200ms ease;
  --ease-slow: 400ms ease;

  /* ─── Z-index ─── */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
}