/* tokens.css — переменные, reset, типографика */
@layer reset, tokens, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, fieldset { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
}

@layer tokens {
  :root {
    /* поверхности */
    --paper: #FBF8F4;
    --paper-deep: #F3EDE4;
    --paper-card: #FFFDF9;
    --bark: #2E3B31;
    --bark-soft: #3C4B40;

    /* текст */
    --ink: #1F2621;
    --ink-soft: #6B7169;
    --ink-faint: #9A9E96;
    --on-dark: #F3EFE8;
    --on-dark-soft: #B9C2B8;

    /* акценты */
    --stem: #4C6B4F;
    --stem-soft: #8FA98F;
    --petal: #E9C4C0;
    --petal-deep: #C98A87;
    --cream: #F6EBD8;
    --berry: #9C3F4E;

    /* линии и тени */
    --line: rgba(76, 107, 79, .22);
    --line-soft: rgba(76, 107, 79, .12);
    --shadow-s: 0 2px 10px -4px rgba(31, 38, 33, .18);
    --shadow-m: 0 14px 34px -22px rgba(31, 38, 33, .32);
    --shadow-l: 0 24px 60px -30px rgba(31, 38, 33, .28);

    /* геометрия */
    --r-xs: 4px;
    --r-s: 12px;
    --r-m: 20px;
    --r-l: 24px;
    --r-pill: 999px;
    --container: min(1280px, 92vw);
    --gutter: clamp(18px, 3.4vw, 34px);

    /* шрифты (без CDN: системные стеки) */
    --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* движение */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 220ms;
    --t-base: 420ms;
    --t-slow: 720ms;

    /* отрицательный отступ для uppercase-надзаголовков */
    --track: .18em;
  }
}

@layer base {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.62;
    font-weight: 400;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body.is-locked { overflow: hidden; }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.02em;
  }

  .eyebrow {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .lead { font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--ink-soft); max-width: 58ch; }

  .num { font-variant-numeric: tabular-nums; }

  :focus-visible {
    outline: 2px solid var(--stem);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--petal); color: var(--ink); }

  .ico { width: 22px; height: 22px; flex: none; }
  .ico-sm { width: 16px; height: 16px; }

  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--bark); color: var(--on-dark);
    padding: 12px 18px; border-radius: var(--r-s); transition: top var(--t-fast) var(--ease);
  }
  .skip:focus { top: 12px; }
}