/* ============================================================
   ИРГУПС Мессенджер — Design Tokens (Nexus dark theme)
   ============================================================ */

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

:root {
    /* ── Typography ── */
    --font: "Sora", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Consolas", monospace;

    /* ── Core backgrounds (Nexus void dark palette) ── */
    --bg: #0a0c10;
    --bg-body: #0a0c10;
    --bg-sidebar: #161b24;
    --bg-chat: #0f1117;
    --bg-header: #161b24;
    --bg-footer: #161b24;
    --app: #161b24;
    --panel: #161b24;
    --panel-2: #1c2333;
    --card: #1c2333;
    --card-hover: #252d40;

    /* ── Surfaces ── */
    --surface-0: #0a0c10;
    --surface-1: #161b24;
    --surface-2: #1c2333;
    --surface-3: #252d40;

    /* ── Reference-compatible aliases ── */
    --bg-surface: #161b24; /* = --bg-sidebar */
    --bg-elevated: #1c2333; /* = --surface-2 / --card */
    --bg-overlay: #212840; /* between card and card-hover */
    --bg-hover: #252d40; /* = --card-hover */
    --bg-void: #0a0c10; /* = --bg-body */
    --bg-base: #0f1117; /* = --bg-chat */
    --accent: #2d9e4f; /* primary green accent */
    --accent-glow: rgba(45, 158, 79, 0.18);
    --accent-dim: rgba(45, 158, 79, 0.09);
    --green-actual: #3ecf8e; /* teal for online indicators */
    --green-actual-glow: rgba(62, 207, 142, 0.15);

    /* ── Message bubbles ── */
    --bubble-in: #1c2333;
    --bubble-in-hover: #212840;
    --bubble-out: #1e7a3e;
    --bubble-out-hover: #258f49;
    --bubble-out-file: #196634;

    /* ── Borders ── */
    --border: rgba(255, 255, 255, 0.06);
    --border-normal: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(45, 158, 79, 0.5);
    --border-subtle: rgba(255, 255, 255, 0.04);

    /* ── Typography ── */
    --text: #eceef2;
    --text-primary: #eceef2;
    --text-secondary: #7b8399;
    --text-muted: #4a5168;
    --text-timestamp: #5c6b80;
    --text-placeholder: #4a5168;
    --muted: #7b8399;
    --muted-2: #4a5168;

    /* ── Primary Accent (green) ── */
    --green: #2d9e4f;
    --green-hover: #3ab85a;
    --green-dark: #1a7a35;
    --green-muted: rgba(45, 158, 79, 0.15);
    --green-glow: rgba(45, 158, 79, 0.25);

    /* ── Online indicator (teal) ── */
    --online: #3ecf8e;
    --online-glow: rgba(62, 207, 142, 0.25);

    /* ── Semantic ── */
    --blue: #71bafa;
    --danger: #f06e6e;
    --danger-hover: #ff8a80;
    --warning: #ffb74d;
    --offline: #4a5168;

    /* ── Shadows ── */
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-bubble: 0 1px 2px rgba(0, 0, 0, 0.3);

    /* ── Focus / glow ── */
    --focus: rgba(45, 158, 79, 0.35);
    --focus-ring: 0 0 0 3px rgba(45, 158, 79, 0.22);

    /* ── Radius ── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-bubble: 18px;
    --radius-pill: 999px;

    /* ── Transitions ── */
    --transition-fast: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Scrollbar ── */
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-track: transparent;

    /* ── Background solid ── */
    --bg-gradient: #0a0c10;

    /* ── Overlay ── */
    --overlay: rgba(0, 0, 0, 0.75);
    --overlay-light: rgba(0, 0, 0, 0.45);
}