/* ==========================================================================
   Design Tokens - Micro Learning English (Brand v3: Stitch Minimalist Purple)
   Đồng bộ với giao diện mới (index, about, video, courses/compare)
   Nguồn: stitch_minimalist_purple_website_redesign/executive_micro_learning_english/DESIGN.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* Bảng màu thương hiệu v3 (Tím – Trắng – Kem) */
  --color-primary: #5300B9;        /* Nút chính, link, menu đang chọn, logo */
  --color-primary-strong: #6C2BD9; /* Tím sáng: hover nút, icon, điểm nhấn */
  --color-primary-soft: #F3E8FF;   /* Nền tím rất nhạt: hover nút phụ, nhãn */
  --color-accent: #6C2BD9;         /* Icon, đường kẻ, trang trí */
  --color-cta: #5300B9;            /* Nền nút chính */
  --color-cta-hover: #6C2BD9;      /* Nền nút chính khi rê chuột */
  --color-cta-text: #FFFFFF;       /* Chữ trên nút chính */
  --color-warm: #FEA619;           /* Vàng cam: số thứ tự, điểm nhấn nhỏ (chữ tối) */
  --color-highlight: #FEF3C7;      /* Khung ghi chú, khung nổi bật */
  --color-bg: #FFFFFF;             /* Nền trang */
  --color-bg-subtle: #FAF8F5;      /* Nền khối xen kẽ, footer */
  --color-bg-muted: #F3F0EC;       /* Nền thẻ phụ */
  --color-border: #E5E1DA;         /* Viền, đường kẻ */
  --color-heading: #181445;        /* Tiêu đề H1–H3 */
  --color-text: #181445;           /* Chữ nội dung chính */
  --color-text-muted: #4A4455;     /* Đoạn mô tả, chú thích */
  --color-white: #FFFFFF;
  --color-error: #BA1A1A;

  /* Ánh xạ tương thích ngược (các trang cũ vẫn dùng tên biến cũ) */
  --color-yellow: var(--color-warm);
  --color-yellow-light: var(--color-highlight);
  --color-pink-dark: var(--color-primary);
  --color-pink-light: var(--color-accent);
  --color-text-main: var(--color-text);
  --color-text-sub: var(--color-text-muted);
  --color-bg-main: var(--color-white);
  --color-bg-sub: var(--color-bg-muted);

  /* Nhãn trình độ CEFR (theo DESIGN.md của Stitch) */
  --color-badge-a1-bg: #EFF6FF;
  --color-badge-a1-text: #1D4ED8;
  --color-badge-a2-bg: #ECFDF5;
  --color-badge-a2-text: #047857;
  --color-badge-b1-bg: #FEF3C7;
  --color-badge-b1-text: #B45309;
  --color-badge-b2-bg: #F3E8FF;
  --color-badge-b2-text: #6C2BD9;

  /* Typography */
  --font-family-base: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Hệ thống khoảng cách (4, 8, 16, 24, 32, 48 px) */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;

  /* Bo góc */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Bóng đổ (rất nhẹ, theo Stitch) */
  --shadow-sm: 0 1px 3px rgba(30, 27, 75, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 27, 75, 0.08);
  --shadow-lg: 0 8px 30px rgba(30, 27, 75, 0.08);
}