/* ==========================================================================
   TPC — ДИЗАЙН-ТОКЕНЫ
   Единственный источник правды по цвету, типографике, ритму и теням.
   Стиль: уличный поп-арт (Alec Monopoly) в солидной, «дорогой» подаче —
   графит + золото держат 90% экрана, поп-цвета работают точечно.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- ЦВЕТ */

  /* База — глубокий графит с холодным подтоном */
  --c-void:        #07080B;
  --c-bg:          #0B0C10;
  --c-bg-2:        #101218;
  --c-bg-3:        #14161C;
  --c-surface:     #171A22;
  --c-surface-2:   #1D212B;
  --c-line:        #262B36;
  --c-line-soft:   #1E222C;

  /* Сукно — акцентный фон «игровых» секций */
  --c-felt:        #0F3D2E;
  --c-felt-deep:   #0A2A20;
  --c-felt-glow:   #1B6B4F;

  /* Золото — главный акцент: CTA, цифры, рамки, подчёркивания */
  --c-gold:        #C8A24A;
  --c-gold-bright: #E6C877;
  --c-gold-deep:   #8E6F28;
  --c-gold-ink:    #1A1405;

  /* Поп-акценты. Дисциплина: суммарно < 10% площади экрана. */
  --c-pop-blue:    #2D7FF9;
  --c-pop-magenta: #E9438C;
  --c-pop-lime:    #B6E33B;

  /* Текст */
  --c-text:        #F2F1EC;
  --c-text-dim:    #9BA0AB;
  --c-text-faint:  #666C79;
  --c-text-ink:    #0B0C10;

  /* Семантика */
  --c-ok:          #3FBF7F;
  --c-warn:        #E5A93B;
  --c-danger:      #E5544B;

  /* Масти карт */
  --c-suit-red:    #D6423C;
  --c-suit-black:  #14161C;

  /* Прозрачные заливки (стекло, ховеры) */
  --a-gold-06:     rgba(200, 162, 74, 0.06);
  --a-gold-12:     rgba(200, 162, 74, 0.12);
  --a-gold-24:     rgba(200, 162, 74, 0.24);
  --a-gold-40:     rgba(200, 162, 74, 0.40);
  --a-white-04:    rgba(255, 255, 255, 0.04);
  --a-white-08:    rgba(255, 255, 255, 0.08);
  --a-white-12:    rgba(255, 255, 255, 0.12);
  --a-black-40:    rgba(7, 8, 11, 0.40);
  --a-black-72:    rgba(7, 8, 11, 0.72);

  /* Градиенты */
  --g-gold: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 45%, var(--c-gold-deep) 100%);
  --g-gold-line: linear-gradient(90deg, transparent, var(--c-gold) 40%, var(--c-gold-bright) 50%, var(--c-gold) 60%, transparent);
  --g-felt: radial-gradient(120% 90% at 50% 0%, var(--c-felt) 0%, var(--c-felt-deep) 60%, var(--c-bg) 100%);
  --g-page: linear-gradient(180deg, var(--c-void) 0%, var(--c-bg) 22%, var(--c-bg-2) 100%);
  --g-surface: linear-gradient(160deg, var(--a-white-04) 0%, transparent 55%);

  /* ---------------------------------------------------------- ТИПОГРАФИКА */

  /* Дисплейный гротеск. Bahnschrift есть на Windows 10+, SF Pro — на macOS.
     Чтобы подключить свой шрифт — раскомментируйте @font-face в base.css
     и поставьте его первым в стек. */
  --f-display: 'TPC Display', 'Bahnschrift', 'Archivo', 'Inter Tight',
               'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI',
               system-ui, -apple-system, sans-serif;

  --f-text: 'TPC Text', 'Inter', 'SF Pro Text', 'Segoe UI Variable Text',
            'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --f-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;

  /* Плавная типографическая шкала (clamp: моб → десктоп) */
  --t-hero:  clamp(2.85rem, 1.30rem + 6.6vw, 7.5rem);
  --t-h1:    clamp(2.20rem, 1.30rem + 3.8vw, 4.50rem);
  --t-h2:    clamp(1.75rem, 1.15rem + 2.5vw, 3.25rem);
  --t-h3:    clamp(1.30rem, 1.02rem + 1.2vw, 2.00rem);
  --t-h4:    clamp(1.08rem, 0.98rem + 0.5vw, 1.35rem);
  --t-lead:  clamp(1.05rem, 0.96rem + 0.42vw, 1.32rem);
  --t-body:  clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem);
  --t-sm:    0.905rem;
  --t-xs:    0.795rem;
  --t-micro: 0.705rem;

  --lh-tight: 0.94;
  --lh-snug:  1.14;
  --lh-base:  1.62;
  --lh-loose: 1.78;

  --ls-mega:  -0.035em;
  --ls-tight: -0.02em;
  --ls-base:  0;
  --ls-wide:  0.08em;
  --ls-mega-wide: 0.22em;

  --w-light: 300;
  --w-book:  400;
  --w-med:   500;
  --w-semi:  600;
  --w-bold:  700;
  --w-black: 800;

  /* ---------------------------------------------------------------- РИТМ */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.75rem;
  --s-8:  3.5rem;
  --s-9:  4.5rem;
  --s-10: 6rem;
  --s-11: 8rem;
  --s-12: 11rem;

  /* Вертикальные отступы секций — тоже адаптивные */
  --pad-section: clamp(4rem, 2.2rem + 7vw, 9rem);
  --pad-section-sm: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);

  /* -------------------------------------------------------------- МАКЕТ */
  --w-max:      1320px;
  --w-wide:     1560px;
  --w-narrow:   760px;
  --w-reading:  68ch;
  --pad-gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --h-header:   72px;

  /* -------------------------------------------------------- СКРУГЛЕНИЯ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------- ТЕНИ */
  --sh-sm:   0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.24);
  --sh-md:   0 4px 12px rgba(0,0,0,.38), 0 14px 34px rgba(0,0,0,.32);
  --sh-lg:   0 10px 26px rgba(0,0,0,.44), 0 32px 72px rgba(0,0,0,.42);
  --sh-gold: 0 6px 22px rgba(200,162,74,.24), 0 1px 0 rgba(255,255,255,.14) inset;
  --sh-inset-line: inset 0 1px 0 var(--a-white-08);
  --sh-focus: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-gold);

  /* ------------------------------------------------------------ ДВИЖЕНИЕ */
  --e-out:   cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);

  --d-fast: 140ms;
  --d-base: 260ms;
  --d-slow: 480ms;
  --d-lazy: 820ms;

  /* --------------------------------------------------------------- СЛОИ */
  --z-below:    -1;
  --z-base:      1;
  --z-sticky:   40;
  --z-header:   60;
  --z-drawer:   70;
  --z-modal:    80;
  --z-toast:    90;
  --z-cursor:  100;
}

/* Тонкая зернистость поверх фона — снимает «пластиковость» плоского тёмного. */
:root {
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Уважаем системную настройку «меньше движения»: гасим всё декоративное. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-lazy: 1ms;
  }
}