/* ════════════════════════════════════════════════════════════════
 * CLEANDORF Design System — base tokens (v2.0 / Redesign 2026-07)
 *
 * One source of truth for color/spacing/typography/radii/shadows
 * consumed by lib/ds/* helpers and all dashboard pages.
 *
 * Redesign language (согласовано 2026-07-07): ахроматичная база +
 * ОДИН красный акцент (#E4002B, Pantone 185C) как пунктуация ·
 * границы вместо теней (плоско) · данные = украшение.
 * Шрифты: Bebas Neue (числа/латынь-дисплей) · Geologica (UI/текст) ·
 * JetBrains Mono (табличные цифры). Мокапы: design-redesign/.
 *
 * Default = DARK (near-black). Light применяется через data-ds-mode=
 * "light" / data-theme="light" (для CLEANDORF tenant по умолчанию light
 * — tenants/cleandorf/theme.json mode:"light").
 *
 * Per-tenant override — tenants/<id>/theme.json → inline :root{} через
 * lib/ds/render-theme.js. NEVER hardcode hex в HTML — только токены.
 * ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Geologica:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Color: surfaces (dark default — near-black, flat) ─────── */
  --ds-bg:            #0C0C0E;
  --ds-bg-elevated:   #141417;
  --ds-bg-card:       #17171B;
  --ds-bg-card-hover: #1E1E23;
  --ds-bg-overlay:    rgba(0, 0, 0, 0.6);

  /* ── Color: foreground ────────────────────────────────────── */
  --ds-fg:            #F4F4F6;
  --ds-fg-muted:      #9A9AA2;
  --ds-fg-subtle:     #66666E;
  --ds-fg-on-accent:  #ffffff;

  /* ── Color: borders (hairline — несут структуру вместо теней) ─ */
  --ds-border:        #26262C;
  --ds-border-strong: #34343C;

  /* ── Color: brand accent (CLEANDORF; tenant overlay сохраняет) ─ */
  --ds-accent:           #E4002B;  /* Pantone 185C */
  --ds-accent-fg:        #ffffff;
  --ds-secondary:        #FFCD00;  /* Pantone 116C */
  --ds-secondary-fg:     #1a1a00;

  /* ── Color: status ────────────────────────────────────────── */
  --ds-success:        #10b981;
  --ds-success-fg:     #86efac;
  --ds-warning:        #FFCD00;   /* brand yellow */
  --ds-warning-fg:     #ffdd57;
  --ds-danger:         #ef4444;   /* отличен от brand-red, чтобы «удалить» ≠ бренд */
  --ds-danger-fg:      #fca5a5;
  --ds-info:           #7AA2FF;
  --ds-info-fg:        #b9ccff;

  /* ── Spacing scale ────────────────────────────────────────── */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  24px;
  --ds-space-6:  32px;
  --ds-space-7:  48px;
  --ds-space-8:  64px;

  /* ── Radii (строгие ровные линии бренда) ──────────────────── */
  --ds-radius-sm:   6px;
  --ds-radius-md:   10px;
  --ds-radius-lg:   14px;
  --ds-radius-pill: 999px;

  /* ── Typography ──────────────────────────────────────────── */
  --ds-font-body:    'Geologica', -apple-system, 'Segoe UI', Inter, Roboto, sans-serif;
  --ds-font-display: 'Bebas Neue', 'Geologica', -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --ds-text-xs:   11px;
  --ds-text-sm:   13px;
  --ds-text-md:   14px;
  --ds-text-lg:   16px;
  --ds-text-xl:   20px;
  --ds-text-2xl:  24px;
  --ds-text-3xl:  32px;
  --ds-text-4xl:  44px;

  --ds-leading-tight:  1.2;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.7;

  /* ── Shadows (минимум — только модалки/поповеры; глубина из границ) ─ */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --ds-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.70);

  /* ── Focus ring (a11y requirement) ────────────────────────── */
  --ds-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 45%, transparent);

  /* ── Touch target (a11y / mobile) ─────────────────────────── */
  --ds-touch: 44px;

  /* ── Motion (механическая точность — CLI-tool, не маркетинг) ─ */
  --ds-motion-fast:  150ms;
  --ds-motion-base:  200ms;
  --ds-motion-slow:  320ms;
  --ds-easing-out:   cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-index scale ───────────────────────────────────────── */
  --ds-z-base:     1;
  --ds-z-sticky:   10;
  --ds-z-drawer:   90;
  --ds-z-dropdown: 100;
  --ds-z-modal:    1000;
  --ds-z-toast:    10000;

  /* ── Accent tints / states ───────────────────────────────── */
  --ds-accent-hover:     #ff1a45;
  --ds-accent-soft:      rgba(228, 0, 43, 0.14);
  --ds-accent-glow:      rgba(228, 0, 43, 0.10);  /* приглушено — плоский язык */
  --ds-accent-2:         var(--ds-secondary);
  --ds-accent-2-soft:    rgba(255, 205, 0, 0.13);

  --ds-bg-glass:         rgba(20, 20, 24, 0.72);
  --ds-bg-overlay-blur:  rgba(0, 0, 0, 0.55);

  --ds-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.25);
  --ds-shadow-float: 0 8px 24px -12px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--ds-border);
  --ds-shadow-glow:  0 0 0 1px var(--ds-accent-soft);  /* без большого свечения */

  --ds-ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);

  --ds-num-pos:      #34D399;
  --ds-num-neg:      #ff7a85;

  /* ── Status-soft tints ───────────────────────────────────── */
  --ds-success-soft: color-mix(in srgb, var(--ds-success) 15%, transparent);
  --ds-success-fg-light: #86efac;
  --ds-danger-soft:  color-mix(in srgb, var(--ds-danger) 15%, transparent);
  --ds-danger-fg-light: #fca5a5;
  --ds-warning-soft: color-mix(in srgb, var(--ds-warning) 12%, transparent);
  --ds-warning-border-soft: rgba(255, 205, 0, 0.25);
  --ds-info-soft:    color-mix(in srgb, var(--ds-info) 15%, transparent);

  /* ── Glass surface (TG MiniApp /me) — сплющено под плоский язык ─── */
  --ds-glass-bg:        rgba(23, 23, 27, 0.60);
  --ds-glass-bg-active: rgba(30, 30, 36, 0.85);
  --ds-glass-border:    var(--ds-border);
  --ds-glass-border-strong: var(--ds-border-strong);
  --ds-glass-border-yellow: rgba(255, 205, 0, 0.40);
  --ds-glass-shadow:    0 8px 24px -14px rgba(0, 0, 0, 0.45);
  --ds-glass-shadow-active: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --ds-glass-toast-bg:  rgba(20, 20, 24, 0.95);

  /* ── Body bg — плоский, без radial-mesh «неона» ───────────────────── */
  --ds-mesh-accent-1:   rgba(228, 0, 43, 0.05);
  --ds-mesh-accent-2:   transparent;
  --ds-mesh-accent-3:   transparent;

  /* ── Overlay (modal-bg) ───────────────────────────────────────────── */
  --ds-overlay-strong:  rgba(6, 6, 10, 0.85);

  /* ── Hairline divider ────────────────────────────────────────────── */
  --ds-divider:         #22222A;

  /* ── Track (пустой фон прогресс/буллет-полос — /health, mini-bars) ── */
  --ds-track:           #1E1E23;

  /* Sidebar layout */
  --ds-sidebar-w:           240px;
  --ds-sidebar-w-collapsed: 72px;
  --ds-topbar-h:            60px;
  --ds-gutter:              16px;
}

/* Light-mode override (CLEANDORF default).
 * data-ds-mode выставляется render-theme.js: сначала legacy data-theme
 * (per-page), fallback на tenant.theme.mode. Селектор [data-theme="light"]
 * страхует от flash-of-dark до выполнения inline JS. */
:root[data-ds-mode="light"],
:root[data-theme="light"] {
  --ds-bg:            #ffffff;
  --ds-bg-elevated:   #fafafa;
  --ds-bg-card:       #ffffff;
  --ds-bg-card-hover: #f4f4f5;
  --ds-fg:            #0a0a0b;
  --ds-fg-muted:      #6c6c72;
  --ds-fg-subtle:     #74747d;   /* было #9a9aa1 (2.8:1 на белом — оси графиков нечитаемы); ~4.1:1 */
  --ds-border:        #eaeaec;
  --ds-border-strong: #d9d9dd;

  --ds-shadow-sm: 0 1px 2px rgba(20, 25, 50, 0.06);
  --ds-shadow-md: 0 4px 12px rgba(20, 25, 50, 0.10);
  --ds-shadow-lg: 0 24px 60px -20px rgba(10, 10, 20, 0.28);

  --ds-accent-soft:      rgba(228, 0, 43, 0.08);
  --ds-accent-glow:      rgba(228, 0, 43, 0.0);
  --ds-bg-glass:         rgba(255, 255, 255, 0.82);
  --ds-bg-overlay-blur:  rgba(20, 20, 30, 0.40);
  --ds-shadow-xs:    0 1px 2px rgba(20,20,30,0.04);
  --ds-shadow-float: 0 8px 24px -12px rgba(10,10,20,0.18), 0 0 0 1px var(--ds-border);
  --ds-shadow-glow:  0 0 0 1px var(--ds-accent-soft);
  --ds-num-pos:      #0E9F6E;
  --ds-num-neg:      #dc2626;

  --ds-warning-fg:   #B9860B;
  --ds-info:         #1D4ED8;
  --ds-info-fg:      #1D4ED8;

  /* glass (light) */
  --ds-glass-bg:        rgba(255, 255, 255, 0.72);
  --ds-glass-bg-active: rgba(255, 255, 255, 0.92);
  --ds-glass-shadow:    0 8px 24px -14px rgba(10,10,20,0.16);
  --ds-glass-shadow-active: 0 8px 24px -12px rgba(10,10,20,0.22);
  --ds-glass-toast-bg:  rgba(255, 255, 255, 0.96);

  /* плоский светлый фон — без mesh */
  --ds-mesh-accent-1:   rgba(228, 0, 43, 0.035);
  --ds-mesh-accent-2:   transparent;
  --ds-mesh-accent-3:   transparent;

  --ds-overlay-strong:  rgba(20, 20, 30, 0.45);
  --ds-divider:         #eef0f2;
  --ds-track:           #f0f0f2;
}

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

/* ── Global focus ring (a11y) ──────────────────────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}