/* ==========================================================================
   tokens.css — единственное место, где живут цвета, шрифты, отступы.
   Меняете бренд-цвет или шрифт здесь — меняется весь сайт.
   ========================================================================== */
:root {
  /* Цвета: тёмная тема по умолчанию */
  --c-bg:         #0b0b0d;
  --c-bg-alt:     #101013;
  --c-surface:    #16161a;
  --c-surface-2:  #1d1d22;
  --c-line:       rgba(255, 255, 255, .08);
  --c-line-strong:rgba(255, 255, 255, .18);

  --c-text:       #f3f3f5;
  --c-text-2:     #b6b6bf;
  --c-text-3:     #80808b;

  --c-accent:       #e30613;
  --c-accent-hover: #ff2331;
  --c-accent-soft:  rgba(227, 6, 19, .12);
  --c-accent-glow:  rgba(227, 6, 19, .38);
  --c-on-accent:    #ffffff;

  --c-ok:    #3ecf8e;
  --c-error: #ff6b6b;

  /* Типографика */
  --font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-300: clamp(.8125rem, .79rem + .1vw, .875rem);
  --fs-400: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-500: clamp(1.125rem, 1.07rem + .3vw, 1.3125rem);
  --fs-600: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --fs-700: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-800: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

  /* Отступы (шкала) */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --sp-9: clamp(4rem, 3rem + 5vw, 8rem);

  /* Формы */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 76px;

  /* Наклон из фирменного стиля (угол курсива в логотипе) */
  --slant: clamp(24px, 4vw, 64px);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .18s var(--ease);
  --t-med: .4s var(--ease);
}

/* Светлая секция: локально переопределяем токены, компоненты подхватят сами */
.theme-light {
  --c-bg:         #eeeef1;
  --c-bg-alt:     #e6e6ea;
  --c-surface:    #ffffff;
  --c-surface-2:  #f6f6f8;
  --c-line:       rgba(11, 11, 13, .1);
  --c-line-strong:rgba(11, 11, 13, .22);
  --c-text:       #131316;
  --c-text-2:     #4a4a53;
  --c-text-3:     #787884;
  --c-accent-soft:rgba(227, 6, 19, .08);
  color: var(--c-text);
  background: var(--c-bg);
}