/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Root variables
   ========================================================================== */
:root {
  /* Colors */
  --theme: #9cad5b;
  --primary: #9cad5b;
  --secondary: #272c33;
  --dark: #1a1b18;
  --text-color: #4a4a48;
  --heading: #1a1b18;
  --background-color: #ffffff;
  --border-color: #e5e5e2;
  --white: #ffffff;
  --black: #000000;
  --bg-alt: #f6f6f6;

  /* Typography */
  --font-primary: "Inter", Arial, Helvetica, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-64: 4rem;
  --fs-50: 3.125rem;
  --fs-40: 2.5rem;
  --fs-34: 2.125rem;
  --fs-30: 1.875rem;
  --fs-24: 1.5rem;
  --fs-22: 1.375rem;
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-15: 0.9375rem;
  --fs-14: 0.875rem;
  --fs-13: 0.8125rem;
  --fs-12: 0.75rem;

  --lh-normal: normal;
  --lh-body: 1.6;
  --lh-30: 1.875rem;

  /* Spacing */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-30: 1.875rem;
  --space-40: 2.5rem;
  --space-60: 3.75rem;
  --space-80: 5rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-round: 50%;

  /* Borders */
  --border: 1px solid var(--border-color);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26, 27, 24, 0.06);
  --shadow-md: 0 10px 30px rgba(26, 27, 24, 0.1);

  /* Transitions */
  --transition: all 0.3s ease-in-out;

  /* Layout */
  --container-width: 1600px;
  --container-padding: 160px;
  --header-padding: 30px;
  --header-height: 144px;
  --header-topbar-height: 34px;

  /* Z-index */
  --z-header: 100;
  --z-overlay: 90;
  --z-search: 110;
  --z-dropdown: 80;
}