/* tokens.css — design tokens для chopper-parts.ru
 *
 * Палитра: тёмная база (графит/чёрный) + хром-серебро + burgundy и
 * orange-amber как акценты. Под нишу мото-чопперов / круизеров.
 * Типографика: Bebas Neue (заголовки) + Inter (body) — self-hosted.
 *
 * Все размеры в rem (1rem = 16px). Брейкпоинты в media-queries.
 */

:root {
  /* ---------- цвета ---------- */
  --color-bg:           #0c0d10;            /* основной фон */
  --color-bg-elev-1:    #14161b;            /* приподнятый блок (карточка) */
  --color-bg-elev-2:    #1c1f26;            /* второй уровень */
  --color-bg-hover:     #232730;
  --color-border:       #2a2e38;
  --color-border-soft:  #1f232a;

  --color-text:         #e6e8ec;            /* основной текст */
  --color-text-muted:   #9aa1ab;            /* вспомогательный */
  --color-text-faint:   #6c7380;            /* подписи, сноски */
  --color-text-inverse: #0c0d10;            /* на светлой плашке */

  --color-accent:       #ff7a18;            /* оранж-amber, CTA, цена */
  --color-accent-hover: #ff8c33;
  --color-accent-soft:  #2a1c10;            /* фон под акцент */

  --color-secondary:        #8b1d2c;        /* burgundy, badge sale */
  --color-secondary-hover:  #a4263a;

  --color-chrome:       #c2c8d0;            /* хром-светло-серый */
  --color-chrome-shine: #f0f3f7;

  --color-success:      #4ec97c;
  --color-warning:      #f0b22b;
  --color-danger:       #e35f5f;

  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 4px 12px rgba(0,0,0,.55);
  --shadow-3: 0 12px 36px rgba(0,0,0,.65);

  /* ---------- типографика ---------- */
  --font-display: "Bebas Neue", "Oswald", "Impact", "Arial Black", sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  --fs-xs:   0.75rem;     /* 12px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-base: 1rem;        /* 16px */
  --fs-md:   1.125rem;    /* 18px */
  --fs-lg:   1.25rem;     /* 20px */
  --fs-xl:   1.5rem;      /* 24px */
  --fs-2xl:  2rem;        /* 32px */
  --fs-3xl:  2.75rem;     /* 44px */
  --fs-4xl:  4rem;        /* 64px — hero */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --ls-tight:  -0.01em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-display: 0.06em;

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

  /* ---------- слои/радиусы/расстояния ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;

  --container-max: 1280px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  /* ---------- анимация ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:   120ms;
  --t-base:   220ms;
  --t-slow:   400ms;

  --header-h: 72px;
}

@media (max-width: 720px) {
  :root {
    --header-h: 60px;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
  }
}