:root {
  --dark-blue: #00507e;
  --main-blue: #007bc1;
  --sky-blue: #00c2f3;
  --line-blue: #9DC1D6;

  --00: #fff;
  --02: #f7f9fa;
  --03: #edf2f7;
  --05: #cedbe7;
  --20: #A3ACB4;
  --40: #78848e;
  --60: #434f5a;
  --80: #1d252c;
  --90: #0d1014;

  --color-text: var(--90);

  --color-bg: var(--00);
  --color-bg-light: var(--02);

  --font-family: "Hauora", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */

  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */

  --transition-base: 300ms ease-in-out;
  --transition-fast: 200ms ease-in-out;

  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-full: 9999px;

  --container-max-width: 1440px;
  --container-padding: 80px;

  --section-padding-top: 80px;
  --section-padding-top-mobile: 32px;

  --line-pattern-size: 4px;
  --line-pattern-gap: 8px;

  --line-pattern: repeating-linear-gradient(to right, var(--line-blue) 0, var(--line-blue) var(--line-pattern-size), transparent var(--line-pattern-size), transparent var(--line-pattern-gap));
  --line-pattern-vertical: repeating-linear-gradient(to bottom, var(--line-blue) 0, var(--line-blue) var(--line-pattern-size), transparent var(--line-pattern-size), transparent var(--line-pattern-gap));
  --line-pattern-sky-blue: repeating-linear-gradient(to right, var(--sky-blue) 0, var(--sky-blue) var(--line-pattern-size), transparent var(--line-pattern-size), transparent var(--line-pattern-gap));
  --line-pattern-vertical-sky-blue: repeating-linear-gradient(to bottom, var(--sky-blue) 0, var(--sky-blue) var(--line-pattern-size), transparent var(--line-pattern-size), transparent var(--line-pattern-gap));

  --hero-bg-image-home: url("../../../assets/images/hero-bg.jpg");
  --hero-bg-image-default: var(--hero-bg-image-home);

  --hero-bg-url-desktop: ;
  --hero-bg-url-mobile: ;
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 1.5rem; /* 24px */
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: var(--spacing-md); /* 16px */
  }
}