/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS — Zalo Hub V3
   Zalo PC Blue Design System
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Layout ── */
  --nav-width: 220px;
  --nav-collapsed: 64px;
  --header-height: 52px;
  --chat-sidebar-width: 340px;

  /* ── Typography ── */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;

  /* ── Colors: Zalo Blue ── */
  --color-primary: #0068FF;
  --color-primary-hover: #005CE6;
  --color-primary-light: #E8F0FE;

  --color-bg: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F0F2F5;

  --color-text: #081C36;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #7A7A7A;

  --color-border: #E5E7EB;
  --color-border-light: #F0F0F0;

  --color-success: #20C45C;
  --color-warning: #F7A600;
  --color-error: #E74C3C;
  --color-info: #0068FF;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}