/* Token thiết kế Triniverse AI — mobile-first, max 430px */

:root {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-soft: rgba(79, 70, 229, 0.18);
  --color-accent: #10b981;
  --color-accent-soft: rgba(16, 185, 129, 0.16);
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.14);

  --color-bg: #0b1020;
  --color-bg-elevated: #12182c;
  --color-surface: #171e36;
  --color-surface-2: #1e2744;
  --color-border: rgba(148, 163, 184, 0.18);
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-faint: #cbd5e1;
  --color-link: #a5b4fc;

  --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;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-50: 50px;

  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.35);
  --shadow-md: 0 10px 28px rgba(2, 6, 23, 0.42);
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.55);

  --font: "Be Vietnam Pro", system-ui, sans-serif;
  --app-max: 430px;
  --header-h: 56px;
}