/* ====================================================================
   GOLDJAXE Cash Cow Design Tokens — CSS Variables
   --------------------------------------------------------------------
   Источник: brand-system-v1/guidelines/BRAND-GUIDELINES.md v1.0
   Применяется в: goldjaxe.ai, Academy LMS, Discourse-тема Syndicate,
                  GATE AdminUI
   Версия: 1.0.0 — 2026-05-01

   Использование:
     1. Подключить как первый CSS-файл проекта (или импортировать в global.css)
     2. Использовать переменные: color: var(--gj-text-primary);
     3. Для Discourse-темы — положить в Admin → Customize → CSS

   ВАЖНО: эти токены НЕ применяются к goldjaxe.com и goldjaxe.org —
          они идут на текущем стиле.
   ==================================================================== */

:root {
  /* ===========================================
     COLOR / PRIMARY (Amber gold)
     =========================================== */
  --gj-amber:           #EBC554;  /* Primary Amber — лого, CTA, акценты */
  --gj-amber-light:     #F8F080;  /* Highlight, glow, hover */
  --gj-amber-dark:      #C9A332;  /* Pressed, тени, secondary accents */

  /* ===========================================
     COLOR / BACKGROUND
     =========================================== */
  --gj-bg:              #080808;  /* Полотно сайтов */
  --gj-bg-secondary:    #050505;  /* Карточки, контейнеры */
  --gj-bg-tertiary:     #1A1A1A;  /* Hover-states карточек */

  /* ===========================================
     COLOR / TEXT
     =========================================== */
  --gj-text:            #FFFFFF;  /* Primary body text */
  --gj-text-secondary:  #E5E5E5;  /* Secondary text */
  --gj-text-tertiary:   #A3A3A3;  /* Captions, disabled */
  --gj-text-accent:     #EBC554;  /* Amber акцент в тексте — H1, цифры */

  /* ===========================================
     COLOR / BORDER
     =========================================== */
  --gj-border-subtle:   #1A1A1A;
  --gj-border:          #525252;
  --gj-border-strong:   #A3A3A3;
  --gj-border-accent:   #EBC554;

  /* ===========================================
     COLOR / CYBER-BLUE (только terminal/Vault, ≤2% поверхности)
     =========================================== */
  --gj-cyber:           #00F0FF;

  /* ===========================================
     COLOR / STATE
     =========================================== */
  --gj-success:         #22C55E;
  --gj-error:           #EF4444;
  --gj-warning:         #EBC554;
  --gj-info:            #00F0FF;

  /* ===========================================
     COLOR / SUB-MARK (Q-Check/внутренний продукт — справочно)
     =========================================== */
  --gj-silver:          #B0B5BC;

  /* ===========================================
     TYPOGRAPHY
     =========================================== */
  --gj-font-display:    'Space Grotesk', system-ui, sans-serif;
  --gj-font-body:       'Inter', system-ui, sans-serif;
  --gj-font-mono:       'Space Mono', 'Fira Code', ui-monospace, monospace;

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

  /* Font sizes — соответствуют Tailwind preset */
  --gj-fs-xs:           12px;
  --gj-fs-sm:           14px;
  --gj-fs-base:         16px;
  --gj-fs-lg:           18px;
  --gj-fs-xl:           20px;
  --gj-fs-2xl:          24px;
  --gj-fs-3xl:          32px;
  --gj-fs-4xl:          40px;
  --gj-fs-5xl:          48px;
  --gj-fs-6xl:          64px;
  --gj-fs-7xl:          80px;
  --gj-fs-8xl:          96px;

  --gj-lh-none:         1.0;
  --gj-lh-tight:        1.05;
  --gj-lh-snug:         1.1;
  --gj-lh-normal:       1.15;
  --gj-lh-relaxed:      1.5;
  --gj-lh-loose:        1.6;

  --gj-ls-tighter:      -0.02em;
  --gj-ls-tight:        -0.01em;
  --gj-ls-normal:       0;
  --gj-ls-wide:         0.01em;
  --gj-ls-wider:        0.02em;
  --gj-ls-widest:       0.05em;  /* GOLDJAXE wordmark */

  /* ===========================================
     SPACING (4px base)
     =========================================== */
  --gj-sp-0:            0;
  --gj-sp-1:            4px;
  --gj-sp-2:            8px;
  --gj-sp-3:            12px;
  --gj-sp-4:            16px;
  --gj-sp-5:            20px;
  --gj-sp-6:            24px;
  --gj-sp-8:            32px;
  --gj-sp-10:           40px;
  --gj-sp-12:           48px;
  --gj-sp-16:           64px;
  --gj-sp-20:           80px;
  --gj-sp-24:           96px;
  --gj-sp-32:           128px;

  /* ===========================================
     RADIUS (Brutalism — минимум скруглений)
     =========================================== */
  --gj-radius-none:     0;
  --gj-radius-sm:       2px;
  --gj-radius-md:       4px;
  --gj-radius-lg:       8px;
  --gj-radius-full:     9999px;

  /* ===========================================
     BORDER WIDTH
     =========================================== */
  --gj-bw-default:      1px;
  --gj-bw-thick:        2px;
  --gj-bw-heavy:        4px;

  /* ===========================================
     SHADOW
     =========================================== */
  --gj-shadow-subtle:   0 1px 2px 0 rgba(0,0,0,0.5);
  --gj-shadow-card:     0 4px 12px 0 rgba(0,0,0,0.6);
  --gj-shadow-modal:    0 24px 64px 0 rgba(0,0,0,0.8);
  --gj-glow-sm:         0 0 20px 0 rgba(235,197,84,0.25);
  --gj-glow:            0 0 40px 0 rgba(235,197,84,0.40);
  --gj-glow-lg:         0 0 64px 0 rgba(235,197,84,0.55);
  --gj-glow-cyber:      0 0 24px 0 rgba(0,240,255,0.45);

  /* ===========================================
     Z-INDEX
     =========================================== */
  --gj-z-dropdown:      10;
  --gj-z-sticky:        20;
  --gj-z-header:        30;
  --gj-z-modal-bg:      40;
  --gj-z-modal:         50;
  --gj-z-toast:         60;
  --gj-z-terminal:      70;

  /* ===========================================
     DURATION / EASING
     =========================================== */
  --gj-d-fast:          150ms;
  --gj-d-normal:        250ms;
  --gj-d-slow:          400ms;
  --gj-d-scramble:      80ms;

  --gj-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --gj-ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --gj-ease-out:        cubic-bezier(0, 0, 0.2, 1);
}

/* ====================================================================
   BASE RESET / TYPOGRAPHY
   Применяется автоматически при подключении этого файла
   ==================================================================== */

html {
  background: var(--gj-bg);
  color: var(--gj-text);
  font-family: var(--gj-font-body);
  font-size: var(--gj-fs-base);
  line-height: var(--gj-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--gj-bg);
  color: var(--gj-text);
}

/* Light theme override for tokens (v4.4.17 audit-fix · Призма 2)
   --gj-bg / --gj-text hardcoded в :root к dark значениям выше.
   В light theme нужен warm cream + deep type. */
[data-theme="light"] {
  --gj-bg: #FAFAF7;     /* warm off-white (соответствует --bg-secondary в master CSS [data-theme="light"]) */
  --gj-text: #1A1A1A;   /* deep type · anti-eyestrain */
}

/* Tabular nums для всех числовых блоков (статистика, цены, прогресс) */
.gj-num,
[data-gj-num],
.gj-stat {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ====================================================================
   TYPOGRAPHY HELPERS
   ==================================================================== */

.gj-h1 {
  font-family: var(--gj-font-display);
  font-weight: var(--gj-fw-heavy);
  font-size: var(--gj-fs-7xl);
  line-height: var(--gj-lh-tight);
  letter-spacing: var(--gj-ls-wider);
  color: var(--gj-text);
}

.gj-h2 {
  font-family: var(--gj-font-display);
  font-weight: var(--gj-fw-bold);
  font-size: var(--gj-fs-5xl);
  line-height: var(--gj-lh-snug);
  letter-spacing: var(--gj-ls-wider);
}

.gj-h3 {
  font-family: var(--gj-font-display);
  font-weight: var(--gj-fw-semibold);
  font-size: var(--gj-fs-3xl);
  line-height: var(--gj-lh-normal);
  letter-spacing: var(--gj-ls-wide);
}

.gj-body {
  font-family: var(--gj-font-body);
  font-size: var(--gj-fs-base);
  line-height: var(--gj-lh-loose);
  color: var(--gj-text-secondary);
}

.gj-caption {
  font-family: var(--gj-font-body);
  font-size: var(--gj-fs-sm);
  font-weight: var(--gj-fw-medium);
  line-height: var(--gj-lh-normal);
  letter-spacing: var(--gj-ls-wider);
  color: var(--gj-text-tertiary);
  text-transform: uppercase;
}

.gj-mono {
  font-family: var(--gj-font-mono);
  font-size: var(--gj-fs-sm);
  line-height: var(--gj-lh-relaxed);
  color: var(--gj-text);
}

/* GOLDJAXE wordmark — для использования в логотипах текстом */
.gj-wordmark {
  font-family: var(--gj-font-display);
  font-weight: var(--gj-fw-heavy);
  letter-spacing: var(--gj-ls-widest);
  text-transform: uppercase;
}

/* ====================================================================
   BUTTONS
   ==================================================================== */

.gj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gj-sp-2);
  padding: var(--gj-sp-3) var(--gj-sp-6);
  font-family: var(--gj-font-display);
  font-weight: var(--gj-fw-semibold);
  font-size: var(--gj-fs-sm);
  letter-spacing: var(--gj-ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--gj-bw-thick) solid transparent;
  border-radius: var(--gj-radius-sm);
  cursor: pointer;
  transition: all var(--gj-d-normal) var(--gj-ease);
  user-select: none;
}

.gj-btn-primary {
  background: var(--gj-amber);
  color: var(--gj-bg);
  border-color: var(--gj-amber);
}
.gj-btn-primary:hover {
  background: var(--gj-amber-light);
  border-color: var(--gj-amber-light);
  box-shadow: var(--gj-glow-sm);
}
.gj-btn-primary:active {
  background: var(--gj-amber-dark);
  border-color: var(--gj-amber-dark);
}

.gj-btn-secondary {
  background: transparent;
  color: var(--gj-amber);
  border-color: var(--gj-amber);
}
.gj-btn-secondary:hover {
  background: var(--gj-amber);
  color: var(--gj-bg);
  box-shadow: var(--gj-glow-sm);
}

.gj-btn-ghost {
  background: transparent;
  color: var(--gj-text);
  border-color: transparent;
}
.gj-btn-ghost:hover {
  color: var(--gj-amber);
  background: var(--gj-bg-tertiary);
}

.gj-btn:disabled,
.gj-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ====================================================================
   CARDS
   ==================================================================== */

.gj-card {
  background: var(--gj-bg-secondary);
  border: var(--gj-bw-default) solid var(--gj-border-subtle);
  border-radius: var(--gj-radius-md);
  padding: var(--gj-sp-6);
  transition: border-color var(--gj-d-normal) var(--gj-ease),
              box-shadow var(--gj-d-normal) var(--gj-ease);
}
.gj-card:hover {
  border-color: var(--gj-border-accent);
  box-shadow: var(--gj-glow-sm);
}

/* ====================================================================
   FORMS
   ==================================================================== */

.gj-input {
  width: 100%;
  padding: var(--gj-sp-3) var(--gj-sp-4);
  background: var(--gj-bg-secondary);
  color: var(--gj-text);
  font-family: var(--gj-font-body);
  font-size: var(--gj-fs-base);
  border: var(--gj-bw-default) solid var(--gj-border);
  border-radius: var(--gj-radius-sm);
  transition: border-color var(--gj-d-normal) var(--gj-ease);
}
.gj-input:focus {
  outline: none;
  border-color: var(--gj-amber);
  box-shadow: 0 0 0 1px var(--gj-amber);
}
.gj-input::placeholder {
  color: var(--gj-text-tertiary);
}

/* ====================================================================
   DECORATIVE — Hexagon mesh оверлей
   Применяется как .gj-mesh поверх hero-секций (opacity ≤15%)
   ==================================================================== */

.gj-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'><polygon points='40,2 78,24 78,68 40,90 2,68 2,24' fill='none' stroke='%23EBC554' stroke-opacity='0.08' stroke-width='1'/></svg>");
  background-repeat: repeat;
  opacity: 0.6;
}

/* Gold radial glow — для hero и CTA-зон */
.gj-glow-bg {
  background: radial-gradient(ellipse at center, rgba(235,197,84,0.15) 0%, rgba(8,8,8,0) 70%);
}

/* ====================================================================
   BLUEPRINT PULT FAMILY · Soft canonical tokens
   --------------------------------------------------------------------
   v4.84.0 (Этап 2 Twin Canonical Unification · 2026-05-24)
   Унификация header + footer + nav position для всех 4 пультов
   (twin / live-board / pulse / plan) без ломки Этапа 1 ratified.

   - Header: slim 60px ops density (by-design отличие от 77px .ai-header
     маркетинга — пульты показывают плотный operational контент).
   - Footer typography: sync с .ai canonical (JBM 13px ls 0.10em uppercase
     rgba 0.4) — см. canonical/landings/ai.html footer legal line.
   - Brand + top-note min-width: фиксирует nav.x во всех пультах
     (закрывает «прыгающую» позицию nav между Карта↔Хроника↔Пульс↔План).
   ==================================================================== */
:root {
  /* Header geometry */
  --pult-header-h: 60px;
  --pult-tabs-h: 44px;
  --pult-foot-h: 28px;
  --pult-cube-size: 44px;     /* v4.84.2: sync с canonical .ai-cube-h PNG 44×44 */
  --pult-cube-fs: 23px;       /* deprecated — canonical PNG cube не использует text */
  /* Brand wordmark + subline */
  --pult-wordmark-fs: 17.5px;
  --pult-wordmark-ls: 0.07em;
  --pult-subline-fs: 12px;
  --pult-subline-ls: 0.14em;
  /* Nav links (4-button Карта/Хроника/Пульс/План) */
  --pult-nav-link-fs: 12px;
  --pult-nav-link-ls: 0.10em;
  --pult-nav-link-pad: 9px 16px;
  /* Top-note dynamic status */
  --pult-top-note-fs: 12px;
  --pult-top-note-ls: 0.10em;
  /* Position fix · brand + top-note min-width → nav.x фиксирован во всех пультах */
  --pult-brand-min-w: 311px;
  --pult-top-note-min-w: 302px;
  /* Footer typography · sync с .ai canonical (canonical/landings/ai.html footer line) */
  --pult-foot-fs: 13px;
  --pult-foot-ls: 0.10em;
  --pult-foot-color: rgba(255, 255, 255, 0.40);
  --pult-foot-tt: uppercase;

  /* ────────────────────────────────────────────────────────────────────
     CINEMATIC UNIFIED SCALE · Этап 5 (v4.90.0 · 2026-05-27)
     --------------------------------------------------------------------
     CEO mandate 27.05 «текст катастрофически мелкий + Карту тоже подними
     + эффект ВАУ при кликании по двойнику».

     Designer (Skill goldjaxe-designer) research:
     v4.88-4.89 взял compact-density с Карта-paspart (sidebar 372px wide,
     11.5-13px OK), но Пульс/План/Хроника — это dashboards на full-width
     1440px+ где нужен comfortable read уровня Linear/Stripe Dashboard
     (body min 14px, meta min 12.5px, никогда меньше 11px).

     Решение «Cinematic Unified Scale полностью» — единая premium-шкала
     для всех 4 пультов + future ERP/tour, sync с эталоном лендинга .ai
     v4.68.1 (body 16px / h1 56px / h3 21px). Modular ratio 1.2-1.25 =
     harmonic hierarchy.

     Карта-двойник тоже adopts эту шкалу (typography only · structure
     graph + цвета сохраняются 1-в-1). Узкие колонки (paspart kv-list /
     graph node labels) могут downgrade на 1 step но не ниже floor 11px.
     ──────────────────────────────────────────────────────────────────── */

  /* DISPLAY (hero focal numerals · П1-П7 IDs / block numbers · WOW factor) */
  --pult-display-fs: 36px;
  --pult-display-lh: 1.0;
  /* HEADLINE (paspart drill-down titles · page headers) */
  --pult-headline-fs: 22px;
  --pult-headline-lh: 1.22;
  /* SECTION (outer page section dominant heading) */
  --pult-sec-title-fs: 20px;
  --pult-sec-title-ls: 0.04em;
  /* CARD HEADING (programs / spine blocks / event groups) */
  --pult-card-title-fs: 16px;
  /* SUB-CARD HEADING (tracks / initiatives / nested items) */
  --pult-card-sub-title-fs: 15px;
  /* BODY (summary / event body / detail-text · comfortable read) */
  --pult-body-fs: 14.5px;
  --pult-body-lh: 1.55;
  /* BODY SUB (responsibility / secondary body / muted) */
  --pult-body-sub-fs: 13.5px;
  /* META (dates / roles / counters / deadlines / commits) */
  --pult-meta-fs: 12.5px;
  /* LABEL (eyebrow / chip / status badge / ALL CAPS small UI · floor 11px) */
  --pult-label-fs: 11px;
  --pult-label-ls: 0.12em;
  /* TINY (only tabular data в узких колонках · paspart kv key · graph labels) */
  --pult-tiny-fs: 10.5px;
}