:root {
    /* Brand colors */
    --brand-start: #f540fa;
    --brand-end: #4c65fe;
    --brand: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  
      /* Neutrals - Sáng hơn */
  --bg-0: #1a1f2e;
  --bg-1: #1f2a3f;
  --bg-2: #2a3a5b;
  --bg-3: #3a4a6b;
  --surface: #1a1f2e;
    --text-1: #e6e9ef;
    --text-2: #b7c0d0;
    --text-3: #8b94a7;
  
    /* Accent + states */
    --primary: #5a63ff;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --focus: #8ab4ff;
  
    /* Spacing scale (4px base) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
  
    /* Radii & shadow */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-1: 0 6px 24px rgba(0,0,0,.3);
    --shadow-2: 0 10px 30px rgba(0,0,0,.45);
  
    /* Typography */
    --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  
    /* Layout */
    --container: 1120px;
    --header-h: 72px;
  
    /* Breakpoints */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
  }
  
  .brand-gradient { background-image: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
  
  :root {
    color-scheme: dark;
  }