:root {
  /* ============================================
     COLORS - Catppuccin Latte
     https://github.com/catppuccin/catppuccin
     ============================================ */
  --colors-background: #eff1f5;       /* Base */
  --colors-surface: #e6e9ef;          /* Mantle */
  --colors-text: #4c4f69;             /* Text */
  --colors-text-secondary: #6c6f85;   /* Subtext0 */
  --colors-accent: #1e66f5;           /* Blue */
  --colors-accent-hover: #7287fd;     /* Lavender */
  --colors-accent-light: #dce1fb;     /* Light Lavender tint */
  --colors-border: #ccd0da;           /* Surface0 */
  --colors-border-strong: #acb0be;    /* Surface2 */
  --colors-border-accent: #7287fd;    /* Lavender */
  --colors-error: #d20f39;            /* Red */
  --colors-danger: #d20f39;           /* Red */
  --colors-danger-hover: #e64553;     /* Maroon */
  --colors-overlay: rgba(220, 224, 232, 0.7); /* Crust with opacity */

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  /* Fonts */
  --fonts-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonts-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonts-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font Sizes */
  --font-sizes-0: 12px;
  --font-sizes-1: 14px;
  --font-sizes-2: 16px;
  --font-sizes-3: 18px;
  --font-sizes-4: 20px;
  --font-sizes-5: 24px;
  --font-sizes-6: 32px;

  /* Font Weights */
  --font-weights-normal: 400;
  --font-weights-medium: 500;
  --font-weights-bold: 600;

  /* Line Heights */
  --line-heights-tight: 1.25;
  --line-heights-normal: 1.5;
  --line-heights-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacings-tight: -0.02em;
  --letter-spacings-normal: 0;
  --letter-spacings-wide: 0.02em;

  /* ============================================
     SPACING - 8px Base
     ============================================ */
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* ============================================
     SIZES
     ============================================ */
  --sizes-input-height: 44px;
  --sizes-button-height: 44px;
  --sizes-input-action: 32px;
  --sizes-icon: 24px;
  --sizes-menu-width: 240px;
  --sizes-modal-min-width: 280px;
  --sizes-max-message-width: 100%;

  /* ============================================
     BORDER RADII
     ============================================ */
  --radii-none: 0;
  --radii-sm: 4px;
  --radii-md: 8px;
  --radii-lg: 12px;
  --radii-xl: 16px;
  --radii-pill: 9999px;

  /* ============================================
     BORDERS
     ============================================ */
  --borders-none: none;
  --borders-thin: 1px solid var(--colors-border);
  --borders-medium: 1.5px solid var(--colors-border-strong);
  --borders-accent: 1px solid var(--colors-border-accent);
  --borders-dashed: 1px dashed var(--colors-border);

  /* ============================================
     SHADOWS - 3-Level Elevation
     ============================================ */
  --shadows-none: none;
  --shadows-low: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadows-medium: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadows-high: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transitions-fast: 150ms ease;
  --transitions-normal: 250ms ease;

  /* ============================================
     Z-INDICES
     ============================================ */
  --z-indices-base: 0;
  --z-indices-header: 10;
  --z-indices-menu: 100;
  --z-indices-modal: 200;

  /* ============================================
     OPACITY
     ============================================ */
  --opacities-disabled: 0.5;
  --opacities-muted: 0.7;

  /* ============================================
     MEMBER COLORS - For group chat differentiation
     ============================================ */
  --colors-member-0: #d20f39; /* Red */
  --colors-member-1: #1e66f5; /* Blue */
  --colors-member-2: #40a02b; /* Green */
  --colors-member-3: #fe640b; /* Peach/Orange */
  --colors-member-4: #8839ef; /* Mauve/Purple */
  --colors-member-5: #179299; /* Teal */
}