@layer framework, reset, base, layout, components, pages, utilities, overrides;

:root {
  /* Brand and semantic colors. */
  --color-green: hsl(146 100% 25%);
  --color-green-dark: hsl(146 100% 20%);
  --color-green-on-dark: hsl(146 100% 33%);
  --color-green-dim: hsl(104 100% 25% / 15%);
  --color-dark: hsl(204 24% 27%);
  --color-dark-85: hsl(204 24% 27% / 85%);
  --color-dark-deep: hsl(206 24% 13%);
  --color-dark-deep-85: hsl(206 24% 13% / 85%);
  --color-dark-raised: hsl(206 19% 17%);
  --color-dark-mid: hsl(204 24% 45%);
  --color-text: hsl(206 24% 13%);
  --color-text-muted: hsl(0 0% 42%);
  --color-surface: hsl(0 0% 100%);
  --color-surface-muted: hsl(0 0% 94%);
  --color-border: hsl(204 12% 82%);
  --color-danger: hsl(346 74% 53%);
  --color-success-soft: hsl(104 32% 78%);
  --color-danger-soft: hsl(0 78% 39% / 35%);
  --color-white-90: hsl(0 0% 100% / 90%);
  --color-white-80: hsl(0 0% 100% / 80%);
  --color-white-70: hsl(0 0% 100% / 70%);
  --color-white-60: hsl(0 0% 100% / 60%);
  --color-white-40: hsl(0 0% 100% / 40%);
  --color-white-20: hsl(0 0% 100% / 20%);
  --color-white-10: hsl(0 0% 100% / 10%);
  --color-black-20: hsl(0 0% 0% / 20%);

  /* Social brands. */
  --color-telegram: hsl(199 82% 55%);
  --color-whatsapp: hsl(142 70% 49%);
  --color-vk: hsl(212 100% 50%);
  --color-youtube: hsl(0 65% 47%);

  /* Typography. */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-display: clamp(2.125rem, 3vw + 1rem, 3.5rem);
  --text-heading: clamp(1.875rem, 2.25vw + 1rem, 3rem);
  --text-subheading: clamp(1.5rem, 1.25vw + 0.75rem, 2rem);
  --line-body: 1.6;
  --line-heading: 1.12;
  --measure-copy: 72ch;
  --measure-narrow: 50rem;

  /* Spacing. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout. */
  --container-max: 71.25rem;
  --container-pad: clamp(1.25rem, 4vw, 2rem);
  --section-space: clamp(3.5rem, 7vw, 5rem);
  --section-radius: 1.875rem;

  /* Shape, depth, and motion. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-card: 0 0.5em 1em -0.125em hsl(0 0% 4% / 10%), 0 0 0 1px hsl(0 0% 4% / 2%);
  --shadow-raised: 0 0.75rem 2.5rem hsl(219 41% 11% / 20%);
  --transition-fast: 160ms ease-in-out;
  --transition: 200ms ease-in-out;
}