/* ═══════════════════════════════════════════════════════════════
   BUMAGA SERVICE — Design Tokens v1.0
   ═══════════════════════════════════════════════════════════════
   
   SSOT for all design tokens across the entire platform.
   Extracted from cabinet-ui.css to be available on ALL pages
   (public + cabinet).

   Load order:
     1. tokens.css       ← this file (in header.php <head>)
     2. header.css        ← header styles (in header.php <head>)
     3. cabinet-ui.css    ← cabinet layout/components (in cabinet-shell.php, ЛК only)
     4. page-specific     ← per-page <style> or <link>
   
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ── */
    --bp-bg: #111111;
    --bp-surface: #1a1a1a;
    --bp-card: #1f1f1f;
    --bp-card-hover: #242424;
    --bp-card-raised: #252525;

    /* ── Borders ── */
    --bp-border: #2a2a2a;
    --bp-border-hover: #363636;
    --bp-border-light: #222222;

    /* ── Accent ── */
    --bp-accent: #4a9eff;
    --bp-accent-hover: #5eadff;
    --bp-accent-dim: rgba(74, 158, 255, 0.12);
    --bp-accent-glow: rgba(74, 158, 255, 0.25);
    --bp-accent-border: rgba(74, 158, 255, 0.18);
    --bp-accent-border-strong: rgba(74, 158, 255, 0.30);

    /* ── Semantic ── */
    --bp-green: #34d399;
    --bp-green-dim: rgba(52, 211, 153, 0.12);
    --bp-red: #f87171;
    --bp-red-dim: rgba(248, 113, 113, 0.12);
    --bp-orange: #fbbf24;
    --bp-orange-dim: rgba(251, 191, 36, 0.12);
    --bp-purple: #a78bfa;
    --bp-purple-dim: rgba(167, 139, 250, 0.12);

    /* ── Status (from my-proxies.php) ── */
    --bp-success: #4CAF50;
    --bp-warning: #FF9800;
    --bp-danger: #f44336;

    /* ── Text ── */
    --bp-text: #f0f0f0;
    --bp-text-secondary: #888888;
    --bp-text-muted: #555555;

    /* ── Typography ── */
    --bp-mono: 'Roboto Mono', monospace;
    --bp-sans: 'Roboto', -apple-system, sans-serif;

    /* ── Radii (from deposit.php) ── */
    --bp-radius: 14px;
    --bp-radius-sm: 10px;
    --bp-radius-xs: 8px;

    /* ── Shadows ── */
    --bp-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --bp-shadow-accent: 0 4px 20px rgba(74, 158, 255, 0.2);

    /* ── Transitions ── */
    --bp-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --bp-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Tier colors (from my-proxies.php) ── */
    --bp-tier-economy: #4CAF50;
    --bp-tier-standard: #4a9eff;
    --bp-tier-premium: #FFD700;

    /* ── Cabinet Layout ── */
    --cab-sidebar-w: 272px;
    --cab-sidebar-w-collapsed: 0px;
    --cab-header-h: 80px;
    --cab-content-max-w: 1400px;
    --cab-content-padding: 28px 24px 60px;
    --cab-mobile-break: 1024px;

    /* ── Z-index scale ── */
    --z-overlay: 900;
    --z-header: 1000;
    --z-header-dropdown: 1100;
    --z-cab-overlay: 1200;
    --z-cab-sidebar: 1300;
    --z-modal: 1400;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL LAYOUT STABILITY (anti-jank)
   ═══════════════════════════════════════════════════════════════
   
   Применяется глобально на все страницы (tokens.css = SSOT).
   
   FIX JANK-001 — горизонтальный overflow на уровне html/body.
     Любой блок который вылезает за край вьюпорта (например
     max-width: clamp с большим min) создавал горизонтальный
     скроллбар → его появление/исчезновение сдвигало контент
     на ~15px (ширина скроллбара) → вертикальный layout jank.
   
   FIX JANK-002 — font-display через CSS custom property.
     Устанавливает text-rendering для плавного рендера шрифтов.
   
   FIX JANK-003 — scroll-behavior: auto.
     Явно указываем "не плавный" скролл для программного scroll,
     чтобы браузерный scroll-restoration не конфликтовал с
     нашими IntersectionObserver-анимациями.
   ═══════════════════════════════════════════════════════════════ */

html {
    /* FIX JANK-001 */
    overflow-x: hidden;
    /* FIX JANK-003 */
    scroll-behavior: auto;
}

body {
    /* FIX JANK-001 */
    overflow-x: hidden;
    /* FIX JANK-002 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
