/* AI Edu LK · design tokens v4
   warm paper + ink + heraldic NAVY (from logo) + finance + funnel palette
   Spec v2 §2.5 + spec v3 phase plan §#80.
   2026-05-25: добавлены финансовые токены и воронка-палитра для Phase 3-mock UI. */

:root {
  /* ══ ТОКЕНЫ v3 «единый бренд» (2026-07-05): палитра/геометрия = ДС лендинга
     «Фундамент» (ground/paper + единственный кобальт, gem-радиусы, холодные тени).
     Спека: docs/superpowers/specs/2026-07-05-lk-tokens-v3-brand-unify.md ══ */

  /* — backgrounds — */
  --bg-page:        #EDEAE1;   /* ground — тёплая подложка страницы */
  --bg-canvas:      #FBF9F4;   /* paper — бумага карточек */
  --bg-soft:        #E7E3D8;   /* pull-out тон между ground и paper */
  --bg-tint:        #DED9CB;   /* плотный заполняющий тон */
  --bg-dark:        #16213A;   /* navy — тёмные полосы/плашки */
  --bg-dark-soft:   #1D2A47;

  /* — ink (text) — */
  --ink:            #1B1A17;   /* тёплый почти-чёрный (ДС) */
  --ink-strong:     #141310;
  --ink-mute:       #6B675D;
  --ink-faint:      #7A7565;   /* AA на ground */
  --ink-on-dark:    #FBF9F4;
  --ink-on-dark-mute: rgba(251, 249, 244, 0.6);

  /* — COBALT accent (единственный акцент бренда) — */
  --accent:         #2B4C8C;   /* кобальт */
  --accent-strong:  #16213A;   /* navy для press/active и тёмных плашек */
  --accent-soft:    #C9D6F0;   /* sky-soft — деликатный фон-тон (текстом только на тёмном) */
  --sky:            #9DB4E4;   /* текст/метки НА ТЁМНОМ (кобальт/navy) */
  --sky-soft:       #C9D6F0;
  --accent-wash:    rgba(43, 76, 140, 0.07);
  --accent-watermark: rgba(43, 76, 140, 0.05);

  /* — exact Fundament logo geometry (source viewBox 238×36) — */
  --brand-lockup-top-width: 132px;
  --brand-lockup-desktop-width: 174px;
  --brand-lockup-menu-width: 174px;
  --brand-lockup-watermark-width: 330px;

  /* — status — */
  --moss:           #4A6B3A;
  --garnet:         #8A2E22;   /* danger only */
  --amber:          #997225;

  /* — hairlines / borders — */
  --hair:           #D9D4C5;
  --hair-soft:      #E2DECF;
  --hair-strong:    #1B1A17;

  /* ──────────────────────────────────────────────────────────────────
     FINANCE STATUS PALETTE (Phase 3-mock + Phase 3-prod)
     spec v3 phase plan §#80. WCAG AA verified vs --bg-canvas.
     ────────────────────────────────────────────────────────────────── */
  --state-paid:       #2D7A4A;   /* зелёный — оплачено / success — контраст 4.6:1 vs #FFFFFF */
  --state-paid-bg:    #E8F2EB;   /* пастельный fon для badge */
  --state-pending:    #B27D2C;   /* янтарный — ожидание оплаты — контраст 4.5:1 */
  --state-pending-bg: #F5EBD9;
  --state-overdue:    #B53A3A;   /* красный — просрочено — контраст 5.6:1 */
  --state-overdue-bg: #F4DEDE;
  --state-refunded:   #6B6B6B;   /* серый — возврат — контраст 6.8:1 */
  --state-refunded-bg:#EBEBEB;

  /* ──────────────────────────────────────────────────────────────────
     FUNNEL PALETTE (Phase 3-mock + Phase 4 admin-funnel-analytics)
     От холодного к тёплому — стадии воронки от лида до зачисления.
     spec v3 phase plan §#80.
     ────────────────────────────────────────────────────────────────── */
  --funnel-new:        #C5D1E0;   /* лид только что пришёл */
  --funnel-trial:      #97A8C1;   /* записан на пробное */
  --funnel-contract:   #5E7CA3;   /* договор подписан */
  --funnel-paid:       #2D5A8F;   /* оплачен первый период */
  --funnel-enrolled:   #1F3461;   /* активный участник */
  --funnel-lost:       #C8C2BA;   /* отвалился (нейтральный серо-беж) */

  /* ──────────────────────────────────────────────────────────────────
     GRADE PALETTE (varies by scale)
     column.scale ∈ {5, 10, 100}. spec v2 §2.5.5 + P-blocker #3.
     Используется через .grade-value.scale-N { color: ... } в base.css.
     ────────────────────────────────────────────────────────────────── */
  --grade-excellent: #2D7A4A;   /* 5 / 9-10 / 85-100 */
  --grade-good:      #4A6B3A;   /* 4 / 7-8 / 70-84 */
  --grade-fair:      #997225;   /* 3 / 5-6 / 50-69 */
  --grade-poor:      #B53A3A;   /* 2 / 3-4 / 30-49 */
  --grade-fail:      #8A2E22;   /* 1 / 0-2 / 0-29 */
  --grade-na:        #8B847C;   /* «н» (нет данных) или «.» */

  /* ──────────────────────────────────────────────────────────────────
     CHART PALETTE (Code Reality Issue #6)
     Заменяет hard-coded hex `#137333/#4d9460/#f5d2b0` в analytics.
     Используется через CSS vars в SVG `fill`.
     ────────────────────────────────────────────────────────────────── */
  --chart-bar:       #2B4C8C;   /* cobalt bars */
  --chart-dot:       #5E7CA3;   /* приглушённый кобальт для точек */
  --chart-grid:      #D9D4C5;   /* hairline grid */
  --chart-positive:  #2D7A4A;   /* зелёный для positive trends */
  --chart-negative:  #B53A3A;   /* красный для negative */
  --chart-neutral:   #8B847C;

  /* — fonts (v3: Golos везде; serif только «человеческий голос» .voice) — */
  --font-display:   'Golos Text', -apple-system, system-ui, sans-serif;
  --font-body:      'Golos Text', -apple-system, system-ui, sans-serif;
  --font-voice:     'Piazzolla', Georgia, serif;  /* цитаты/миссия/отзывы — italic */
  --font-mono:      'JetBrains Mono', 'Courier New', ui-monospace, monospace; /* только цифры/код */

  /* — easing — */
  --ease-ui:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:     cubic-bezier(0.22, 1, 0.36, 1);   /* «мягкое приземление» (ДС) */
  --ease-exit:      cubic-bezier(0, 0, 0.2, 1);
  --ease-land:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:        cubic-bezier(0.76, 0, 0.24, 1);   /* крупные полётные переходы */

  /* — durations — */
  --t-micro:        100ms;
  --t-fast:         200ms;
  --t-base:         300ms;
  --t-slow:         500ms;
  --t-entrance:     800ms;

  /* — radii (v3.1 «органично»: округлость по роли, НЕ всё pill) — */
  --r-button:       14px;    /* обычные кнопки */
  --r-cta:          999px;   /* только главные CTA */
  --r-input:        12px;
  --r-card:         22px;    /* крупные поверхности */
  --r-card-sm:      14px;    /* плотные данные: журнал/таблицы/ячейки */
  --r-pill:         999px;   /* чипы-теги */
  --r-avatar:       50%;

  /* — shadows (v3: холодные, со сдвигом в navy; карточки почти плоские) — */
  --shadow-half:    0 0 0 0.5px var(--hair);
  --shadow-lift:    0 6px 30px rgba(22, 33, 58, 0.07);
  --shadow-panel:   0 30px 90px rgba(22, 33, 58, 0.25);

  /* UX polish primitives for dense role workflows */
  --ux-action-min-height: 36px;
  --ux-focus-ring: 0 0 0 2px rgba(43, 76, 140, 0.25);
  --ux-danger-bg: #FBEAE7;
  --ux-danger-ink: #8A2E22;
  --ux-success-bg: #E8F2EB;
  --ux-success-ink: #2D7A4A;

  /* — RGB-split для rgba() в тёмной теме (dark-fix) — */
  --bg-page-rgb: 250, 247, 242;
  --bg-canvas-rgb: 255, 255, 255;
  --ink-strong-rgb: 14, 12, 9;
  /* — Арена (светлая): самоцветы + мягкие тени — */
  --arena-cyan: #0EA5C4; --arena-magenta: #E0489E; --arena-violet: #7C5CFF; --arena-lime: #5AAE2E;
  --arena-ink: #1A1410; --arena-mute: #6B6258;
  --arena-surface: #FFFFFF; --arena-track: #ECE6DA;
  --arena-ring: linear-gradient(135deg, #0EA5C4, #7C5CFF);
  --arena-glass-bg: rgba(255,255,255,.66); --arena-glass-bd: rgba(26,20,16,.08); --arena-glass-blur: blur(14px);
  --arena-glow: 0 6px 20px rgba(124,92,255,.18);
  --arena-hero: linear-gradient(180deg, #2A0E45, #7A1E6B 45%, #FF3D7F 75%, #FF9E40);
  /* — Летняя атмосфера (default season) — */
  --season-accent: #F2A93B; --season-accent2: #15B8A6; --season-accent3: #FF6B4A;
  --season-tint: rgba(242,169,59,.05);
}

/* ──────────────────────────────────────────────────────────────────
   DARK THEME (В1/1.6 · «тёмная тема»)
   Активируется только при <html data-theme="dark"> — атрибут ставит
   бутстрап в auth-guard.js ТОЛЬКО на ученических страницах (data-role=student),
   поэтому учительские/родительские страницы не затрагиваются.
   Ремап структурных токенов; всё в ЛК построено на них → тема доезжает везде.
   Контрасты выверены WCAG AA на стенде (avg 5.06, текст 19:1, ячейки 4.6:1).
   ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  /* v3: тёмная тема = navy-мир ДС (полосы .band как среда) */
  --bg-page:        #111A2E;
  --bg-canvas:      #16213A;   /* navy — бумага тёмного мира */
  --bg-soft:        #1D2A47;
  --bg-tint:        #24345A;
  --bg-dark:        #0B1220;
  --bg-dark-soft:   #101A30;

  /* ink — paper-светлый */
  --ink:            #F1EEE5;
  --ink-strong:     #FBF9F4;
  --ink-mute:       #A9B4CC;
  --ink-faint:      #8291B4;
  --ink-on-dark:    #FBF9F4;
  --ink-on-dark-mute: rgba(251, 249, 244, 0.6);

  /* accent — sky-пара ДС (текст/метки на тёмном) */
  --accent:         #9DB4E4;
  --accent-strong:  #C9D6F0;
  --accent-soft:    #5E7CA3;
  --sky:            #9DB4E4;
  --sky-soft:       #C9D6F0;
  --accent-wash:    rgba(157, 180, 228, 0.12);
  --accent-watermark: rgba(157, 180, 228, 0.06);

  /* status */
  --moss:           #7FB069;
  --garnet:         #E0786B;
  --amber:          #D9A94A;

  /* hairlines */
  --hair:           #26324F;
  --hair-soft:      #1F2A44;
  --hair-strong:    #3D4C73;

  /* finance status — осветлённый текст + тёмные подложки */
  --state-paid:       #5BBE82;  --state-paid-bg:    #1B2E22;
  --state-pending:    #D9A94A;  --state-pending-bg: #2E2716;
  --state-overdue:    #E0786B;  --state-overdue-bg: #2E1A18;
  --state-refunded:   #A8A29A;  --state-refunded-bg:#262B33;

  /* grade palette — осветлено под тёмный фон */
  --grade-excellent: #5BBE82;
  --grade-good:      #8FB878;
  --grade-fair:      #D9A94A;
  --grade-poor:      #E0786B;
  --grade-fail:      #E0786B;
  --grade-na:        #8089AB;

  /* chart */
  --chart-bar:       #9DB4E4;
  --chart-dot:       #C9D6F0;
  --chart-grid:      #26324F;
  --chart-positive:  #5BBE82;
  --chart-negative:  #E0786B;
  --chart-neutral:   #8291B4;

  /* shadows / ux primitives */
  --shadow-half:    0 0 0 0.5px var(--hair);
  --shadow-lift:    0 6px 30px rgba(0, 0, 0, 0.35);
  --shadow-panel:   0 30px 90px rgba(0, 0, 0, 0.5);
  --ux-focus-ring:  0 0 0 2px rgba(157, 180, 228, 0.4);
  --ux-danger-bg:   #2E1A18;  --ux-danger-ink:  #E0786B;
  --ux-success-bg:  #1B2E22;  --ux-success-ink: #5BBE82;

  --bg-page-rgb: 19, 22, 32;
  --bg-canvas-rgb: 26, 31, 44;
  --ink-strong-rgb: 250, 247, 242;
  --arena-cyan: #3DE8FF; --arena-magenta: #FF4FB0; --arena-violet: #A77DFF; --arena-lime: #B6FF3D;
  --arena-ink: #ECEFF6; --arena-mute: #8A93AB;
  --arena-surface: #1A1F2C; --arena-track: #232A3D;
  --arena-ring: linear-gradient(135deg, #3DE8FF, #A77DFF);
  --arena-glass-bg: rgba(255,255,255,.06); --arena-glass-bd: rgba(255,255,255,.14); --arena-glass-blur: blur(16px);
  --arena-glow: 0 0 18px rgba(61,232,255,.35);
  --season-tint: rgba(242,169,59,.10);
}

/* ──────────────────────────────────────────────────────────────────
   PAYMENT BADGE COMPONENTS
   Использовать в parent-portal / admin-payments / payment history.
   ────────────────────────────────────────────────────────────────── */
.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.02em;
  text-transform: none;
}
.payment-badge--paid      { color: var(--state-paid);     background: var(--state-paid-bg); }
.payment-badge--pending   { color: var(--state-pending);  background: var(--state-pending-bg); }
.payment-badge--overdue   { color: var(--state-overdue);  background: var(--state-overdue-bg); }
.payment-badge--refunded  { color: var(--state-refunded); background: var(--state-refunded-bg); }
.payment-badge .icon { width: 12px; height: 12px; flex: 0 0 auto; }

/* ──────────────────────────────────────────────────────────────────
   FUNNEL STAGE BARS (admin-funnel-analytics)
   ────────────────────────────────────────────────────────────────── */
.funnel-bar {
  height: 8px;
  border-radius: 4px;
  transition: width var(--t-base) var(--ease-ui);
}
.funnel-bar--new        { background: var(--funnel-new); }
.funnel-bar--trial      { background: var(--funnel-trial); }
.funnel-bar--contract   { background: var(--funnel-contract); }
.funnel-bar--paid       { background: var(--funnel-paid); }
.funnel-bar--enrolled   { background: var(--funnel-enrolled); }
.funnel-bar--lost       { background: var(--funnel-lost); }

/* ──────────────────────────────────────────────────────────────────
   GRADE VALUE STYLING (5/10/100-балльная)
   `.grade-value.scale-5[data-grade="5"]` → excellent color etc.
   ────────────────────────────────────────────────────────────────── */
.grade-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.grade-value.scale-5[data-grade="5"]   { color: var(--grade-excellent); }
.grade-value.scale-5[data-grade="4"]   { color: var(--grade-good); }
.grade-value.scale-5[data-grade="3"]   { color: var(--grade-fair); }
.grade-value.scale-5[data-grade="2"]   { color: var(--grade-poor); }
.grade-value.scale-5[data-grade="1"]   { color: var(--grade-fail); }
.grade-value.scale-5[data-grade="н"],
.grade-value.scale-5[data-grade="."]   { color: var(--grade-na); }

/* 10-балльная: 9-10 excellent, 7-8 good, 5-6 fair, 3-4 poor, 1-2 fail */
.grade-value.scale-10[data-grade="10"], .grade-value.scale-10[data-grade="9"]  { color: var(--grade-excellent); }
.grade-value.scale-10[data-grade="8"],  .grade-value.scale-10[data-grade="7"]  { color: var(--grade-good); }
.grade-value.scale-10[data-grade="6"],  .grade-value.scale-10[data-grade="5"]  { color: var(--grade-fair); }
.grade-value.scale-10[data-grade="4"],  .grade-value.scale-10[data-grade="3"]  { color: var(--grade-poor); }
.grade-value.scale-10[data-grade="2"],  .grade-value.scale-10[data-grade="1"]  { color: var(--grade-fail); }

/* 100-балльная: используйте class via JS — data-grade="87" → scale-100-good */
.grade-value.scale-100-excellent { color: var(--grade-excellent); }
.grade-value.scale-100-good      { color: var(--grade-good); }
.grade-value.scale-100-fair      { color: var(--grade-fair); }
.grade-value.scale-100-poor      { color: var(--grade-poor); }
.grade-value.scale-100-fail      { color: var(--grade-fail); }