/* ==========================================================================
   KidSpark Design System — design tokens (nguồn sự thật duy nhất)
   Mobile-first, nhắm tới trẻ 4–9 tuổi. Đã kiểm tra tương phản WCAG AA.
   Font: font mặc định của máy (không tải font ngoài, không cần license font).
   ========================================================================== */

:root {
  /* ---------- Màu thương hiệu (mỗi màu: 50 nền nhạt · 400/500 chính · 600/700 cạnh + chữ) ---------- */
  --color-grape-50:  #F0ECFF;
  --color-grape-500: #6C4CF1;   /* Primary — nút chính, điều hướng */
  --color-grape-600: #5B3FD9;
  --color-grape-700: #4A31B5;   /* cạnh 3D của nút primary */

  --color-sun-50:  #FFF6D6;
  --color-sun-400: #FFC93C;     /* Secondary — sao, phần thưởng, nhấn mạnh */
  --color-sun-600: #D99A00;     /* cạnh 3D */

  --color-mint-50:  #E3FAF2;
  --color-mint-400: #3DD6A8;    /* Thành công, đúng */
  --color-mint-600: #19A883;    /* cạnh 3D */
  --color-mint-700: #0F7B62;    /* chữ/icon trên nền sáng */

  --color-coral-50:  #FFE9EB;
  --color-coral-300: #FF7A85;   /* Thử lại nhẹ nhàng (không dùng đỏ gắt) */
  --color-coral-600: #C8303F;   /* nút nguy hiểm, nền chữ trắng */
  --color-coral-700: #B52C3B;   /* chữ lỗi trên nền sáng */

  --color-sky-50:  #E4F3FF;
  --color-sky-300: #6CC3FF;     /* Thông tin, môn Khoa học/Thiên nhiên */
  --color-sky-600: #1A74C9;

  --color-orange-400: #FF9F43;  /* Streak, năng lượng */
  --color-orange-600: #D9741A;

  /* ---------- Trung tính (ấm, không dùng đen thuần) ---------- */
  --color-ink:        #2B2A4C;  /* chữ chính — 12.9:1 trên cream */
  --color-ink-muted:  #5F5D85;  /* chữ phụ — ≥ 5.8:1 */
  --color-line:       #E6DFF5;  /* viền, đường phân cách (trang trí) */
  --color-control-off:#8F87B5;  /* nền control tắt — ≥ 3:1 trên trắng/kem (WCAG 1.4.11) */
  --color-bg:         #FFF8EC;  /* nền app (kem ấm, dịu mắt hơn trắng) */
  --color-surface:    #FFFFFF;  /* thẻ, dialog */
  --color-overlay:    rgb(43 42 76 / 0.55);

  /* ---------- Màu theo vai trò (dùng cái này trong component) ---------- */
  --color-primary:          var(--color-grape-500);
  --color-primary-edge:     var(--color-grape-700);
  --color-on-primary:       #FFFFFF;
  --color-secondary:        var(--color-sun-400);
  --color-secondary-edge:   var(--color-sun-600);
  --color-on-secondary:     var(--color-ink);
  --color-success:          var(--color-mint-400);
  --color-success-edge:     var(--color-mint-600);
  --color-on-success:       var(--color-ink);
  --color-success-text:     var(--color-mint-700);
  --color-error:            var(--color-coral-300);
  --color-error-strong:     var(--color-coral-600);
  --color-error-text:       var(--color-coral-700);
  --color-info:             var(--color-sky-300);
  --color-focus-ring:       var(--color-grape-700);

  /* ---------- Chữ ---------- */
  /* Font mặc định của máy, không tải font ngoài. ui-rounded cho chữ tròn trên iOS/macOS,
     các máy khác dùng font hệ thống (Segoe UI, Roboto…). */
  --font-body:    ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);

  --weight-regular: 500;   /* dày hơn 400 một chút để trẻ mới tập đọc dễ nhìn */
  --weight-bold:    700;
  --weight-black:   800;

  /* Thang cỡ chữ (px). Tối thiểu 16 cho mọi nội dung đọc. */
  --text-caption: 14px;    /* chỉ dùng cho nhãn phụ, không phải câu hỏi */
  --text-body:    18px;
  --text-lead:    22px;
  --text-h3:      26px;
  --text-h2:      32px;
  --text-h1:      40px;
  --text-hero:    56px;    /* số điểm, chữ cái học */
  --leading-tight: 1.15;
  --leading-body:  1.6;    /* thoáng cho người mới tập đọc */

  /* ---------- Khoảng cách (lưới 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --screen-gutter: 20px;

  /* ---------- Bo góc — tròn, mềm, không có góc nhọn ---------- */
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* ---------- Vùng chạm ---------- */
  --touch-min:     48px;   /* tối thiểu tuyệt đối (Material 48dp) */
  --touch-default: 56px;   /* nút thường */
  --touch-large:   72px;   /* nút hành động chính cho trẻ 4–6 tuổi */
  --touch-gap:     12px;   /* khoảng cách tối thiểu giữa 2 vùng chạm */

  /* ---------- Đổ bóng: "cạnh 3D" đặc, cảm giác nút bấm vật lý ---------- */
  --edge-height:   6px;
  --edge-pressed:  2px;
  --shadow-card:   0 4px 0 var(--color-line), 0 10px 24px rgb(43 42 76 / 0.08);
  --shadow-float:  0 12px 32px rgb(43 42 76 / 0.18);

  /* ---------- Chuyển động ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* nảy nhẹ khi xuất hiện/bấm */
  --ease-soft:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;   /* ăn mừng, nhận sao */

  /* ---------- Lớp ---------- */
  --z-nav: 10;
  --z-dialog: 100;
  --z-toast: 200;
}

/* Tôn trọng cài đặt giảm chuyển động của thiết bị */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}