/* ============================================================
   VIETBCC DESIGN SYSTEM — TOKENS
   Dùng chung cho toàn bộ dự án. Không override tùy tiện ở trang con.
   ============================================================ */
:root {
  /* ---------- Colors ---------- */
  --color-primary: #6C5CE7;      /* tím pastel - vui vẻ */
  --color-primary-dark: #5849c2;
  --color-secondary: #00CEC9;    /* xanh ngọc - tươi mát */
  --color-accent: #FDCB6E;       /* vàng cam - năng lượng */
  --color-success: #00B894;
  --color-danger: #FF7675;
  --color-info: #74B9FF;

  --color-bg: #F6F5FF;
  --color-bg-alt: #FFFFFF;
  --color-text: #2D2A4A;
  --color-text-muted: #8B87A6;
  --color-border: #E4E1FA;
  --color-white: #FFFFFF;

  /* Gradients cho cảm giác 3D/cute */
  --gradient-hero: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 50%, #74B9FF 100%);
  --gradient-card: linear-gradient(160deg, #FFFFFF 0%, #F1EFFF 100%);
  --gradient-sun: linear-gradient(135deg, #FDCB6E 0%, #FFA502 100%);

  /* ---------- Spacing (4px scale) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---------- Shadow (soft, floating) ---------- */
  --shadow-sm: 0 2px 8px rgba(108, 92, 231, 0.10);
  --shadow-md: 0 8px 20px rgba(108, 92, 231, 0.16);
  --shadow-lg: 0 16px 40px rgba(108, 92, 231, 0.22);
  --shadow-button: 0 6px 0 var(--color-primary-dark);

  /* ---------- Typography ---------- */
  --font-family: 'Baloo 2', 'Quicksand', system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3.25rem;
  --line-height-base: 1.5;

  /* ---------- Animation ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-header: 100;
  --z-modal: 1000;
  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}