/* ==========================================================================
   THE LAST AI SECRET — DESIGN TOKENS v2 "PHẦN CHÌM"
   Cả trang là một cú lặn: mặt nước sáng → càng sâu càng tối. Bảng màu lấy từ
   các trang AI của mona.media (tím sâu, chữ gradient tím→hồng→cam) để trang này
   là trang của MONA, cộng thêm lớp NƯỚC (xanh tím) và ánh SINH HỌC (cam san hô).
   ⛔️ KHÔNG hard-code hex/px/ms ở file khác. Thiếu token → thêm vào ĐÂY trước.
   ========================================================================== */
:root{
  /* ---- 1. MONA core (như các trang AI của site) --------------------------- */
  --mona-violet:   #7c0fd1;
  --mona-violet-2: #a32dff;
  --mona-magenta:  #d61ef4;
  --mona-indigo:   #2f4fe0;
  --mona-coral:    #ff7a59;
  --mona-amber:    #ffa51f;
  --mona-pink:     #ff4fa3;
  --grad-text:     linear-gradient(90deg, #c084ff 0%, #ff6fb3 48%, #ffa51f 100%);
  --grad-cta:      linear-gradient(90deg, #ff7a59, #ff4fa3);
  --grad-mountain: linear-gradient(90deg, var(--mona-indigo), var(--mona-violet-2), var(--mona-magenta), var(--mona-coral));

  /* ---- 2. NƯỚC — theo độ sâu -------------------------------------------- */
  --nuoc-0:   #2f6bff;   /* mặt nước, có nắng */
  --nuoc-1:   #1f4fe0;
  --nuoc-2:   #1436a8;
  --nuoc-3:   #0f2a86;
  --nuoc-4:   #0a1e63;   /* đáy */
  --troi:     #dfe6ff;   /* bầu trời trên mặt nước */
  --troi-2:   #b9c7ff;
  --sinh-hoc: #ff7a59;   /* ánh sinh học = san hô */
  --sinh-hoc-2: #ffb08a;
  --ngoc:     #64e6ff;   /* xanh ngọc của ánh nước */
  --ngoc-2:   #9ff3ff;

  /* ---- 3. NỀN SÁNG có màu (không trắng) --------------------------------- */
  --sang:     #e3eefb;
  --sang-2:   #f0f5ff;
  --sang-3:   #d3e2fb;

  /* ---- 4. SEMANTIC (tối mặc định) ---------------------------------------- */
  --bg:           var(--nuoc-2);
  --text:         #e8efff;
  --text-strong:  #ffffff;
  --text-muted:   #b9c9ee;
  --line:         rgba(180,205,255,.18);
  --line-strong:  rgba(180,205,255,.36);
  --card:         rgba(255,255,255,.05);
  --card-strong:  rgba(255,255,255,.09);
  --accent:       var(--sinh-hoc);
  --link:         var(--ngoc-2);
  --focus:        var(--mona-amber);
  --glow-violet:  0 0 60px rgba(47,107,255,.45);
  --glow-coral:   0 0 40px rgba(255,122,89,.45);

  /* ---- 5. CHỮ ----------------------------------------------------------- */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --fs-display: clamp(2.6rem, 6.4vw, 5.6rem);
  --fs-h1:  clamp(2.2rem, 5vw, 4.2rem);
  --fs-h2:  clamp(1.9rem, 3.8vw, 3.1rem);
  --fs-h3:  clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body: 1rem; --fs-sm: .9rem; --fs-xs: .78rem; --fs-kicker: .74rem;
  --fs-num: clamp(2.8rem, 7vw, 5.6rem);
  --lh-heading: 1.08; --lh-body: 1.65;
  --ls-kicker: .18em;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* ---- 6. KHOẢNG ------------------------------------------------------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --sec-pad: clamp(4.5rem, 10vw, 9rem);
  --wrap: 1200px; --wrap-narrow: 780px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --rail: 64px;                              /* thước độ sâu bên trái (desktop) */

  /* ---- 7. HÌNH --------------------------------------------------------- */
  --r-sm: 10px; --r-md: 19px; --r-lg: 28px; --r-pill: 999px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.7);

  /* ---- 8. CHUYỂN ĐỘNG ------------------------------------------------- */
  --d-fast:180ms; --d-base:320ms; --d-slow:700ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-stamp: cubic-bezier(.34,1.56,.64,1);
}
.on-light{
  --bg: var(--sang);
  --text: #1d2a5c;
  --text-strong: #0f2a86;
  --text-muted: #5b6a9c;
  --line: rgba(20,54,168,.14);
  --line-strong: rgba(20,54,168,.3);
  --card: rgba(255,255,255,.7);
  --card-strong: #ffffffcc;
  --link: var(--mona-violet);
}