/**
 * УК Юрьево — Design tokens (Samara)
 * Source: design.md
 */

:root {
  /* Colors */
  --color-sky-blue: #0096f7;
  --color-signal-orange: #ff4000;
  --color-ink: #000000;
  --color-pure-white: #ffffff;
  --color-parchment: #fdfdf7;
  --color-warm-sand: #f5f2de;
  --color-standard-card: #f7f7f0;
  --color-driftwood: #e7e3e1;
  --color-ash: #d3d3d3;
  --color-stone: #999999;
  --color-graphite: #666666;
  --color-evergreen: #375033;
  --color-border: rgba(0, 0, 0, 0.1);

  /* Typography — Font Families */
  --font-regola: 'regola', 'Plus Jakarta Sans', 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Typography — Scale */
  --text-caption-sm: 12px;
  --leading-caption-sm: 1.5;
  --tracking-caption-sm: -0.48px;
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: -0.56px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.49;
  --tracking-body-sm: -0.22px;
  --text-body: 18px;
  --leading-body: 1.33;
  --tracking-body: -0.18px;
  --text-body-lg: 23px;
  --leading-body-lg: 1.25;
  --tracking-body-lg: -0.46px;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.5px;
  --text-heading: 48px;
  --leading-heading: 1;
  --tracking-heading: -1.3px;
  --text-heading-lg: 60px;
  --leading-heading-lg: 0.96;
  --tracking-heading-lg: -2.46px;
  --text-display: 96px;
  --leading-display: 0.9;
  --tracking-display: -4.51px;

  --font-weight-regular: 400;
  --font-weight-light: 300;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-42: 42px;
  --spacing-54: 54px;
  --section-gap: 64px;
  --section-gap-lg: 80px;

  /* Layout */
  --page-max-width: 1280px;
  --header-height: 72px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-cards: 12px;
  --radius-pills: 24px;
  --radius-inputs: 12px;
  --radius-buttons: 12px;
  --radius-specialtycards: 18px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.12) 0px 0.5px 2px 0px;
  --shadow-md: rgba(0, 0, 0, 0.08) 0px 2px 10px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.12) 0px 0.5px 1px 0px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.2) 0px 0.5px 2px 0px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration: 320ms;
}

@font-face {
  font-family: 'regola';
  src: local('Regola Light'), local('Regola'), local('Regola-Light');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-regola);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink);
  background: var(--color-parchment);
  font-feature-settings: "lnum", "tnum";
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-sky-blue);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-sky-blue);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-light);
  color: var(--color-ink);
}

.text-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-light);
}

.text-heading-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-light);
}

.text-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-light);
}

.text-heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-light);
}

.text-subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-light);
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

.text-body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}

.text-muted {
  color: var(--color-graphite);
}

.container {
  width: min(100% - 40px, var(--page-max-width));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap);
}

.section--tight {
  padding-block: var(--spacing-54);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-gap-lg);
  }
}

@media (max-width: 767px) {
  :root {
    --text-display: 48px;
    --leading-display: 0.96;
    --tracking-display: -1.8px;
    --text-heading-lg: 36px;
    --leading-heading-lg: 1.05;
    --tracking-heading-lg: -1px;
    --text-heading: 32px;
    --leading-heading: 1.08;
    --tracking-heading: -0.8px;
    --text-heading-sm: 28px;
    --text-subheading: 20px;
    --section-gap: 48px;
    --section-gap-lg: 56px;
  }

  .container {
    width: min(100% - 32px, var(--page-max-width));
  }
}