/* ============================================================
   INTVL-aligned design tokens (Stage 2 — frontend foundation).
   Layered ON TOP of app.css to avoid breaking existing UI.

   Sources:
   - 1.zip/analysis/INTVL_DESIGN_SYSTEM.md (jtb palette + Sohne scale)
   - INTVL_TO_VELOTRACKER_PARITY.md §5

   Naming convention: --jtb-* / --vt-* — никаких конфликтов с
   текущим набором --bg / --text / --accent-* в app.css.

   Все токены — для НОВЫХ компонентов (.vt-*). Существующие
   компоненты продолжают использовать переменные из app.css.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  /* -------- jtb palette (peach, INTVL) -------- */
  --jtb-white:           #FFFFFF;
  --jtb-black:           #1C1C1C;
  --jtb-dark-black:      #141212;
  --jtb-dark-grey:       #4A4949;
  --jtb-darkest-grey:    #2A2A2A;
  --jtb-grey:            #929292;
  --jtb-medium-grey:     #E6E6E6;
  --jtb-light-grey:      #F1F1F1;
  --jtb-lightest-grey:   #F8F8F8;

  --jtb-dark-peach:      #FF8581;
  --jtb-medium-peach:    #FFCFCD;
  --jtb-light-peach:     #FFEEED;
  --jtb-peach-15:        rgba(255, 133, 129, 0.15);
  --jtb-peach-20:        rgba(255, 133, 129, 0.20);
  --jtb-peach-var:       #FE6F64;
  --jtb-peach-hover:     #FF9995;
  --jtb-green:           #D1FA9A;
  --jtb-gold:            #E1B33E;
  --jtb-red:             #FF4C4C;

  /* -------- activity layers — territory base colors -------- */
  --vt-layer-bike:       #4A90D9;
  --vt-layer-bike-soft:  rgba(74, 144, 217, 0.18);
  --vt-layer-bike-line:  #2C5BA8;

  --vt-layer-run:        #4CAF50;
  --vt-layer-run-soft:   rgba(76, 175, 80, 0.18);
  --vt-layer-run-line:   #2E7D32;

  --vt-layer-ski:        #9C27B0;
  --vt-layer-ski-soft:   rgba(156, 39, 176, 0.18);
  --vt-layer-ski-line:   #6A1B9A;

  /* -------- type scale (INTVL custom scale) -------- */
  --vt-h1:    50px;
  --vt-h1-lh: 50px;
  --vt-h2:    32px;
  --vt-h2-lh: 32px;
  --vt-h3:    26px;
  --vt-h3-lh: 26px;
  --vt-h4:    16px;
  --vt-h4-lh: 16px;
  --vt-h5:    12px;
  --vt-h5-lh: 12px;
  --vt-h6:    10px;
  --vt-h6-lh: 10px;
  --vt-paragraph:        14px;
  --vt-paragraph-lh:     20px;
  --vt-large-paragraph:  16px;
  --vt-large-paragraph-lh: 22px;
  --vt-small-paragraph:    12.25px;
  --vt-small-paragraph-lh: 17.5px;
  --vt-notations:        10px;
  --vt-notations-lh:     12px;

  /* -------- radii (INTVL частоты) -------- */
  --vt-radius-full:  9999px;
  --vt-radius-md:    6px;
  --vt-radius-lg:    10px;
  --vt-radius-xl:    12px;
  --vt-radius-2xl:   16px;

  /* -------- spacing scale (используется в .vt-* компонентах) -------- */
  --vt-space-1:  4px;
  --vt-space-2:  8px;
  --vt-space-3:  12px;
  --vt-space-4:  16px;
  --vt-space-5:  20px;   /* основной горизонтальный отступ экрана */
  --vt-space-6:  24px;
  --vt-space-8:  32px;

  /* -------- motion -------- */
  --vt-motion-fast:   180ms;
  --vt-motion-base:   280ms;
  --vt-motion-slow:   400ms;
  --vt-ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --vt-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  /* -------- gamification accents -------- */
  --vt-xp-color:     var(--jtb-green);
  --vt-coin-color:   var(--jtb-gold);
  --vt-streak-color: var(--jtb-peach-var);
}

/* Light-mode overrides for the vt-* surface (когда хост-тема light) */
:root[data-theme="light"] {
  --vt-layer-bike-soft:  rgba(74, 144, 217, 0.22);
  --vt-layer-run-soft:   rgba(76, 175, 80, 0.22);
  --vt-layer-ski-soft:   rgba(156, 39, 176, 0.22);
}

/* ============================================================
   Body-level data-attribute, ставится layers.js.
   Любой потомок может читать activity layer через CSS:
       [data-vt-layer="bike"] .target { color: var(--vt-layer-bike); }
   ============================================================ */
:root[data-vt-layer="bike"] { --vt-layer-current: var(--vt-layer-bike); --vt-layer-current-soft: var(--vt-layer-bike-soft); --vt-layer-current-line: var(--vt-layer-bike-line); }
:root[data-vt-layer="run"]  { --vt-layer-current: var(--vt-layer-run);  --vt-layer-current-soft: var(--vt-layer-run-soft);  --vt-layer-current-line: var(--vt-layer-run-line); }
:root[data-vt-layer="ski"]  { --vt-layer-current: var(--vt-layer-ski);  --vt-layer-current-soft: var(--vt-layer-ski-soft);  --vt-layer-current-line: var(--vt-layer-ski-line); }
/* fallback if attribute is not set yet */
:root:not([data-vt-layer]) {
  --vt-layer-current: var(--vt-layer-bike);
  --vt-layer-current-soft: var(--vt-layer-bike-soft);
  --vt-layer-current-line: var(--vt-layer-bike-line);
}

/* ============================================================
   Utility typography classes (для новых INTVL-like компонентов).
   Не перекрывают существующие .txt-*, .bold и т.п.
   ============================================================ */
.vt-h1 { font-size: var(--vt-h1); line-height: var(--vt-h1-lh); font-weight: 800; letter-spacing: -0.01em; }
.vt-h2 { font-size: var(--vt-h2); line-height: var(--vt-h2-lh); font-weight: 700; letter-spacing: -0.01em; }
.vt-h3 { font-size: var(--vt-h3); line-height: var(--vt-h3-lh); font-weight: 700; }
.vt-h4 { font-size: var(--vt-h4); line-height: var(--vt-h4-lh); font-weight: 600; }
.vt-h5 { font-size: var(--vt-h5); line-height: var(--vt-h5-lh); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.vt-paragraph       { font-size: var(--vt-paragraph);       line-height: var(--vt-paragraph-lh); }
.vt-large-paragraph { font-size: var(--vt-large-paragraph); line-height: var(--vt-large-paragraph-lh); }
.vt-small-paragraph { font-size: var(--vt-small-paragraph); line-height: var(--vt-small-paragraph-lh); }
.vt-notations       { font-size: var(--vt-notations);       line-height: var(--vt-notations-lh); }
.vt-mono { font-feature-settings: "tnum" 1; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vt-motion-fast: 0ms;
    --vt-motion-base: 0ms;
    --vt-motion-slow: 0ms;
  }
}