/*
 * ОКОЛИЦА / Design System v8.0 — November 2026
 * Tokens only (no brandbook landing component selectors).
 * Source: okolica brandbook v8. Logo markup stays site-native.
 */
:root {
  /* Brand colors */
  --ok-orange: #FF5A26;
  --ok-orange-hover: #DF441E;
  --ok-charcoal: #1C1C1C;
  --ok-hero-charcoal: #1C1D1D;
  --ok-ink: #252724;
  --ok-muted: #535851;
  --ok-quiet: #686E67;
  --ok-paper: #F9F9F6;
  --ok-white: #FFFFFF;
  --ok-warm: #F1F0EB;
  --ok-photo: #EEEFEC;
  --ok-line: #DADDD8;
  --ok-border-strong: #9A9D98;
  --ok-footer: #F0F0EC;
  --ok-seller: #F15B34;
  --ok-on-dark: #E0E0DA;
  --ok-focus-color: rgba(255, 90, 38, 0.18);

  /* Typography */
  --ok-display-font: "Oswald", "Arial Narrow", Arial, sans-serif;
  --ok-ui-font: "Manrope", Arial, sans-serif;
  --ok-display-weight: 700;
  --ok-body-size: 14px;
  --ok-h1-size: clamp(39px, 3.7vw, 54px);
  --ok-h2-size: 32px;
  --ok-card-name-size: 13px;

  /* Geometry */
  --ok-container-max: 1392px;
  --ok-side-gutter: 45px;
  --ok-header-height: 92px;
  --ok-search-height: 48px;
  --ok-form-control-height: 58px;
  --ok-button-height: 53px;
  --ok-grid-gap: 16px;
  --ok-section-gap: 56px;
  --ok-radius-xs: 3px;
  --ok-radius-sm: 5px;
  --ok-radius: 6px;
  --ok-radius-hero: 8px;
  --ok-focus-shadow: 0 0 0 3px var(--ok-focus-color);

  /* Motion */
  --ok-fast: 160ms;
  --ok-normal: 240ms;
  --ok-curve: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Aliases */
  --ok-bg: var(--ok-paper);
  --ok-dark: var(--ok-charcoal);
  --ok-accent: var(--ok-orange);
  --ok-primary: var(--ok-ink);
  --ok-secondary: var(--ok-muted);
  --paper: var(--ok-paper);
  --ink: var(--ok-ink);
  --orange: var(--ok-orange);
}