/* ===== Design Tokens / CSS Variables ===== */
:root {
  /* --- Color Palette --- */
  --md-primary: #0052D9;
  --md-on-primary: #fff;
  --md-primary-container: #D4E4FF;
  --md-on-primary-container: #003185;
  --md-secondary: #5F6368;
  --md-surface: #fff;
  --md-surface-1: #FAFAFF;
  --md-surface-2: #F1F2F8;
  --md-surface-3: #E8E9F0;
  --md-surface-4: #DADCE2;
  --md-outline: #80868B;
  --md-outline-variant: #DADCE0;
  --md-on-surface: #202124;
  --md-on-surface-variant: #5F6368;
  --md-error: #D93025;
  --md-error-container: #FFDAD6;
  --md-success: #1E8E3E;
  --md-success-container: #CEEAD6;
  --md-warning: #E37400;
  --md-warning-container: #FEF7CD;

  /* --- Spacing Scale (4px base) --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Typography Scale --- */
  --font-family: 'Google Sans Text', 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Google Sans', var(--font-family);
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;

  /* --- Elevation / Shadows --- */
  --shadow-1: 0 1px 2px rgba(0,82,217,.06), 0 1px 3px 1px rgba(0,82,217,.04);
  --shadow-2: 0 1px 2px rgba(0,82,217,.07), 0 2px 6px 2px rgba(0,82,217,.05);
  --shadow-3: 0 4px 8px 3px rgba(0,82,217,.06), 0 1px 3px rgba(0,82,217,.08);
  --shadow-4: 0 6px 10px 4px rgba(0,82,217,.06), 0 2px 3px rgba(0,82,217,.10);

  /* --- Border Radius --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 9999px;

  /* --- Z-Index Layers --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-lightbox: 600;
  --z-tooltip: 700;

  /* --- Layout --- */
  --nav-rail-width: 72px;
  --top-bar-height: 56px;
  --sidebar-width: 280px;
  --chat-max-width: 820px;
  --content-max-width: 1200px;

  /* --- Transitions --- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-spring: cubic-bezier(.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(.2, 0, 0, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* --- Channel Brand Colors --- */
  --ch-tencent: #0052D9;
  --ch-ocean: #FF6D00;
  --ch-meta: #1877F2;
  --brand-gradient: linear-gradient(135deg, #0042AB, #0052D9, #3D80FF);
}