:root {

  --color-bg:               #F2F4F5;
  --color-surface:          #FBFCFC;

  --color-text:             #1B2127;
  --color-text-muted:       #55606A;
  --color-text-on-accent:   #FBFCFC;

  --color-border:           #C8D0D4;
  --color-border-input:     #79848B;

  --color-accent:           #0F5C63;
  --color-accent-hover:     #0C5057;
  --color-accent-pressed:   #0B464C;
  --color-accent-soft:      #E3EBEC;

  --color-error:            #A32219;
  --color-success:          #1F6B3F;

  --color-focus-ring:       #0F5C63;
  --color-backdrop:         rgba(27, 33, 39, 0.72);
  --color-backdrop-solid:   #141A1F;

  --font-text: "Golos Text", "Golos Text Fallback", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --font-display: var(--font-text);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-xs:   clamp(0.85rem,   0.83rem + 0.09vw, 0.9rem);
  --fs-sm:   clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
  --fs-base: clamp(1.0625rem, 1.04rem + 0.11vw, 1.125rem);
  --fs-md:   clamp(1.22rem,   1.18rem + 0.16vw, 1.3125rem);
  --fs-lg:   clamp(1.41rem,   1.35rem + 0.27vw, 1.5625rem);
  --fs-xl:   clamp(1.59rem,   1.50rem + 0.43vw, 1.84rem);
  --fs-2xl:  clamp(1.81rem,   1.68rem + 0.60vw, 2.16rem);
  --fs-3xl:  clamp(2.06rem,   1.89rem + 0.76vw, 2.5rem);

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-caption: 1.45;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  --measure: 65ch;

  --space-4xs: 0.25rem;
  --space-3xs: 0.375rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --section-gap: clamp(3.5rem, 2.13rem + 6.09vw, 7rem);

  --header-h: 3.5rem;

  --container-max: 1200px;
  --gutter: clamp(1rem, 0.41rem + 2.61vw, 2.5rem);
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 0.61rem + 1.74vw, 2rem);

  --portrait-03-max: 448px;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;

  --shadow-sm: 0 1px 2px rgba(27, 33, 39, 0.06), 0 1px 1px rgba(27, 33, 39, 0.04);
  --shadow-md: 0 6px 20px rgba(27, 33, 39, 0.10), 0 2px 6px rgba(27, 33, 39, 0.06);

  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;

  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --z-base:         0;
  --z-sticky-cta: 100;
  --z-header:     200;
  --z-menu:       300;
  --z-dialog:     400;
  --z-skip-link:  500;

  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  --tap-min:    44px;
  --control-h:  48px;

  --checkbox-size: 20px;

  --success-bar-w: 3px;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --header-h: 4.5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text-muted:   #3A444D;
    --color-border:       #9AA4AA;
    --color-border-input: #4A555D;
  }
}