/* WizPlayo - token thiết kế.
   Hướng thiết kế: "đồ chơi nhựa". Mặt phẳng màu đặc, viền dưới dày cứng (không đổ bóng mờ),
   nút nhấn lún xuống khi chạm, chữ tròn to, màu bão hòa nhưng chữ luôn đủ tương phản.
   Palette art (src/art/palette.js) phải khớp các màu ở đây. */

:root {
  /* ---- Màu nền tảng ---- */
  --c-ink:        #2E2257;   /* chữ chính, viền nét vẽ */
  --c-ink-2:      #5B5083;   /* chữ phụ (đạt 4.5:1 trên nền trắng) */
  --c-ink-3:      #8C84AD;   /* chỉ dùng cho trang trí, không dùng cho chữ */
  --c-bg:         #EEF2FF;   /* nền trang */
  --c-surface:    #FFFFFF;
  --c-line:       #D5DAF3;

  --c-violet:     #6F4CFF;  --c-violet-deep: #4A2FD0;  --c-violet-soft: #E4DCFF;
  --c-sky:        #38C6F4;  --c-sky-deep:    #1B93C2;  --c-sky-soft:    #D3F1FD;
  --c-sun:        #FFD23F;  --c-sun-deep:    #E0A400;  --c-sun-soft:    #FFF0B3;
  --c-coral:      #FF6F91;  --c-coral-deep:  #D64A6F;  --c-coral-soft:  #FFDCE5;
  --c-orange:     #FF9F43;  --c-orange-deep: #E07A12;  --c-orange-soft: #FFE4C5;
  --c-teal:       #19C3B1;  --c-teal-deep:   #0E9686;  --c-teal-soft:   #CDF4EF;
  --c-lime:       #7CD43F;  --c-lime-deep:   #55A91F;  --c-lime-soft:    #E0F6CF;

  /* ---- Phản hồi: sai thì nhẹ nhàng (cam), không dùng đỏ ---- */
  --c-ok:         var(--c-teal);   --c-ok-soft:   var(--c-teal-soft);
  --c-oops:       var(--c-orange); --c-oops-soft: var(--c-orange-soft);

  /* ---- Màu theo môn (đổi nhanh bằng [data-subject]) ---- */
  --c-math:       var(--c-orange);
  --c-letters:    var(--c-coral);
  --c-logic:      var(--c-teal);
  --c-science:    var(--c-lime);
  --c-stem:       var(--c-violet);
  --c-coding:     var(--c-sky);

  /* ---- Chữ ---- */
  --font: "Baloo 2", ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-xs:   0.875rem;                          /* 14 - chỉ cho trang phụ huynh */
  --fs-sm:   1rem;                              /* 16 */
  --fs-md:   1.25rem;                           /* 20 - cỡ chữ thường cho bé */
  --fs-lg:   1.625rem;                          /* 26 */
  --fs-xl:   2.125rem;                          /* 34 */
  --fs-2xl:  clamp(2.25rem, 1.6rem + 2.6vw, 3rem);    /* tiêu đề màn */
  --fs-3xl:  clamp(3rem, 2rem + 4vw, 4.5rem);         /* màn chào */
  --fs-letter: clamp(7rem, 34vmin, 16rem);            /* chữ cái / số khổng lồ */
  --fw-regular: 500;
  --fw-bold:    700;
  --fw-black:   800;
  --lh-tight: 1.05;
  --lh-body:  1.4;
  --lh-letter: 1.5;                                   /* chữ lớn có dấu (Ắ, Ử, Ộ...) cần chỗ cho dấu xếp chồng */

  /* ---- Khoảng cách (lưới 4px) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- Hình khối: bo góc theo vai trò ---- */
  --r-xs: 0.625rem;   /* ô nhỏ, thẻ chip */
  --r-sm: 1rem;
  --r-md: 1.5rem;     /* ô đáp án */
  --r-lg: 2rem;       /* bảng, hộp thoại */
  --r-pill: 999px;    /* nút */
  --edge: 6px;        /* độ dày "viền đáy" của nút/ô */
  --stroke: 5px;      /* nét viền nhân vật, biểu tượng */

  /* ---- Kích thước chạm ---- */
  --tap: 4rem;        /* 64px, nút cho bé */
  --tap-adult: 3rem;  /* 48px, trang phụ huynh */

  /* ---- Vùng an toàn (tai thỏ, thanh điều hướng) ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ---- Chuyển động ---- */
  --motion: 1;                 /* 1 = đầy đủ, 0 = giảm chuyển động */
  --dur-1: 120ms;              /* chạm, nhấn */
  --dur-2: 240ms;              /* hiện/ẩn nhỏ */
  --dur-3: 420ms;              /* chuyển màn, nhân vật */
  --dur-4: 900ms;              /* thưởng sao, ăn mừng */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* nảy nhẹ, quá đà một chút */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Lớp chồng ---- */
  --z-base: 0;  --z-ui: 10;  --z-overlay: 100;  --z-gate: 200;  --z-toast: 300;

  color-scheme: light;
}

/* Giảm chuyển động: motion.js đặt data-motion="reduced"; khi JS chưa chạy thì theo cài đặt hệ điều hành. */
:root[data-motion="reduced"] {
  --motion: 0;
  --dur-1: 1ms;  --dur-2: 1ms;  --dur-3: 1ms;  --dur-4: 1ms;
  --ease-bounce: linear;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) {
    --motion: 0;
    --dur-1: 1ms;  --dur-2: 1ms;  --dur-3: 1ms;  --dur-4: 1ms;
    --ease-bounce: linear;
  }
}

/* ---- Chủ đề theo môn: màn nào có data-subject thì dùng --accent* ---- */
[data-subject="math"]    { --accent: var(--c-orange); --accent-deep: var(--c-orange-deep); --accent-soft: var(--c-orange-soft); --accent-ink: var(--c-ink); }
[data-subject="letters"] { --accent: var(--c-coral);  --accent-deep: var(--c-coral-deep);  --accent-soft: var(--c-coral-soft);  --accent-ink: var(--c-ink); }
[data-subject="logic"]   { --accent: var(--c-teal);   --accent-deep: var(--c-teal-deep);   --accent-soft: var(--c-teal-soft);   --accent-ink: var(--c-ink); }
[data-subject="science"] { --accent: var(--c-lime);   --accent-deep: var(--c-lime-deep);   --accent-soft: var(--c-lime-soft);   --accent-ink: var(--c-ink); }
[data-subject="stem"]    { --accent: var(--c-violet); --accent-deep: var(--c-violet-deep); --accent-soft: var(--c-violet-soft); --accent-ink: #fff; }
[data-subject="coding"]  { --accent: var(--c-sky);    --accent-deep: var(--c-sky-deep);    --accent-soft: var(--c-sky-soft);    --accent-ink: var(--c-ink); }