/* ═══════════════════════════════════════════════════════════════
   LamaPixel — Design Tokens (v2.6+)
   Единый источник правды. Подключается ПЕРВЫМ, до style.css.

   Принцип: новые токены имеют имена нового поколения
   (--c-brand, --s-N, --t-N, --bp-N, --header-h).
   Старые имена (--c-lime, --c-orange) сохранены как алиасы
   через var() — никакой код в проекте не сломается.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── BRAND COLORS ─────────────────────────────────────────── */
  /* Историческое имя --c-lime — это на самом деле оранжевый.
     Резолвим как --c-brand* (правильные имена) и поддерживаем алиасы. */
  --c-brand:           #FF9800;   /* primary orange (= старый --c-lime) */
  --c-brand-light:     #FFB74D;   /*                (= старый --c-lime-b) */
  --c-brand-dark:      #E68900;   /*                (= старый --c-lime-d) */
  --c-brand-glow:      rgba(255,152,0,.15);
  --c-brand-glow-s:    rgba(255,152,0,.06);

  /* Дополнительные акценты */
  --c-teal:            #4AE6C8;
  --c-blue:            #4A8DE6;
  --c-red:             #E64A5E;

  /* ── NEUTRALS — DARK SCALE ────────────────────────────────── */
  --c-black:           #0A0A0A;
  --c-black-s:         #111111;
  --c-black-c:         #161616;
  --c-black-h:         #1C1C1C;
  --c-grey-d:          #2A2A2A;
  --c-grey:            #3D3D3D;
  --c-grey-m:          #7B7B7B;   /* WCAG AA fix: было #6B6B6B (4.04:1 fail) → #7B7B7B (5:1 pass) */
  --c-grey-l:          #9A9A9A;
  --c-grey-s:          #BFBFBF;
  --c-white:           #F0F0F0;
  --c-white-p:         #FFFFFF;

  /* ── ALIASES (backward-compat — 415 usages в проекте) ─────── */
  --c-lime:            var(--c-brand);
  --c-lime-b:          var(--c-brand-light);
  --c-lime-d:          var(--c-brand-dark);
  --c-glow:            var(--c-brand-glow);
  --c-glow-s:          var(--c-brand-glow-s);
  /* --c-orange в style.css был #E6A34A (другой оттенок, использовался редко).
     В inline-стилях --c-orange = #E68900 (= brand-dark, 264 usages).
     Резолвим в пользу inline-значения = --c-brand-dark. */
  --c-orange:          var(--c-brand-dark);
  --c-orange-hover:    var(--c-brand);

  /* ── TYPOGRAPHY: FAMILIES ─────────────────────────────────── */
  --f-d:               'Unbounded', cursive;        /* display / brutalism */
  --f-b:               'Outfit', sans-serif;        /* body */
  --f-m:               'JetBrains Mono', monospace; /* mono / terminal */

  /* ── TYPOGRAPHY: SIZE SCALE ───────────────────────────────── */
  /* Базовая система. На мобильном минимум 16px на input/select/textarea (anti iOS-zoom). */
  --t-xs:              0.75rem;   /* 12px — micro-label (минимум для меток) */
  --t-sm:              0.875rem;  /* 14px — small */
  --t-base:            1rem;      /* 16px — body */
  --t-lg:              1.125rem;  /* 18px */
  --t-xl:              1.25rem;   /* 20px */
  --t-2xl:             1.5rem;    /* 24px */
  --t-3xl:             2rem;      /* 32px */
  --t-4xl:             2.5rem;    /* 40px */
  --t-5xl:             3.25rem;   /* 52px */
  --t-6xl:             clamp(2.5rem, 5vw + 1rem, 5.5rem);  /* hero-style */

  /* ── SPACING SCALE ────────────────────────────────────────── */
  --s-1:               4px;
  --s-2:               8px;
  --s-3:               12px;
  --s-4:               16px;
  --s-5:               24px;
  --s-6:               32px;
  --s-7:               48px;
  --s-8:               64px;
  --s-9:               96px;
  --s-10:              128px;

  /* ── BREAKPOINTS (для js / clamp / queries) ───────────────── */
  --bp-sm:             480px;
  --bp-md:             768px;
  --bp-lg:             1024px;
  --bp-xl:             1280px;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --header-h:          65px;   /* реальная высота: padding 14 + logo 37 + padding 14 */
  --container-max:     1280px;
  --container-wide:    1480px;
  --np-container:      1320px;

  /* ── RADIUS ───────────────────────────────────────────────── */
  --r-xs:              2px;
  --r-s:               6px;
  --r-m:               12px;
  --r-l:               2px;     /* historical: brutalism-style sharp corner */
  --r-xl:              28px;
  --r-pill:            4px;

  /* ── MOTION ───────────────────────────────────────────────── */
  --ease:              cubic-bezier(.4, 0, .2, 1);
  --ease-out:          cubic-bezier(.16, 1, .3, 1);
  --t-fast:            .2s;
  --t-base-d:          .3s;
  --t-slow:            .4s;

  /* ── COLOR SCHEME hint (native UA styling) ────────────────── */
  color-scheme:        dark;
}

/* Light theme — пользователь переключился вручную или auto (Prague 04-21h) */
:root[data-theme="light"]{
  color-scheme:        light;
  /* Контраст fix для светлой темы: было #8A8A8A (3.32:1 fail) → #666666 (5.7:1 pass) */
  --c-grey-m:          #666666;
}