/* ═══════════════════════════════════════════════════════════════════════════
   IQ Test — Design tokens
   The one source for color, type, spacing, radii and motion.
   Every other CSS file reads tokens from here; none sets a color of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Ground and ink ────────────────────────────────────────────────── */
    --paper:        #F1F4F4;   /* page ground, teal-leaning gray */
    --paper-2:      #E7ECEC;   /* section band */
    --surface:      #FFFFFF;   /* cards, content boxes */
    --surface-2:    #F7F9F9;   /* box nested inside a card */
    --line:         #D8E0E0;
    --line-strong:  #798A8A;   /* 3.6:1 on --surface — border of interactive elements (WCAG 1.4.11) */

    --ink:          #0E1B21;   /* body text — 15.9:1 on --surface */
    --ink-2:        #3A4A50;   /* secondary —  8.9:1 */
    --ink-3:        #5E7076;   /* captions  —  5.1:1 (AA for normal text) */
    --ink-invert:   #F1F4F4;

    /* ── Contrast band ──────────────────────────────────────────────────────
       The closing block and the invitation box. The key rule: text on the band
       is ALWAYS light in both themes — only the depth of the ground changes.
       If the band took --ink for its ground and --paper for its text, the two
       would swap in dark mode and the band would become a glaring white slab
       in the middle of a dark page. */
    --band:         #0E1B21;
    --band-ink:     #F1F4F4;   /* 15.9:1 on --band */
    --band-ink-2:   #AEBEC2;   /*  9.1:1 */
    --band-btn:     #F1F4F4;
    --band-btn-ink: #0E1B21;
    --scrim:        rgba(14, 27, 33, .55);   /* dim ground behind a dialog */

    /* ── Item figures ───────────────────────────────────────────────────────
       In light mode these are exactly the colors baked into the SVG, so a
       figure renders the way it was generated. Dark mode changes only these. */
    --fig-bg:       transparent;   /* let the container show through — no off-color rectangle */
    --fig-ink:      #1F2937;
    --fig-line:     #E2E8F0;   /* grid cell border */
    --fig-line-2:   #CBD5E1;   /* option cell border */
    --fig-muted:    #7C8B9E;   /* answer cell — 3.5:1, meets WCAG 1.4.11 (was #94A3B8 at 2.6:1) */
    --fig-notation: #64748B;   /* the ":" and "::" marks in analogy items */

    /* ── Brand ─────────────────────────────────────────────────────────── */
    --brand:        #0B5563;   /* 8.2:1 on --surface */
    --brand-ink:    #073F4A;   /* pressed state */
    --brand-wash:   #E3EDEF;   /* pale ground for chips and selections */
    --brand-line:   #A9C6CC;

    /* ── Signals ───────────────────────────────────────────────────────── */
    --signal:       #95580A;   /* amber — time warning, flagged items (5.7:1) */
    --signal-wash:  #FBF1DF;
    --danger:       #A32117;   /* 7.0:1 */
    --danger-wash:  #FBECEA;
    --good:         #1B6B44;   /* 5.6:1 */
    --good-wash:    #E4F1EA;

    /* ── Data colors (4 ability domains) ───────────────────────────────── */
    --d1: #0B5563;   /* logical   */
    --d2: #A5620A;   /* numerical */
    --d3: #3B5480;   /* spatial   */
    --d4: #46705B;   /* verbal    */

    /* ── Type ──────────────────────────────────────────────────────────── */
    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --fs-xs:      0.78rem;
    --fs-sm:      0.875rem;
    --fs-base:    1rem;
    --fs-md:      1.0625rem;
    --fs-lg:      clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
    --fs-xl:      clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
    --fs-2xl:     clamp(1.9rem, 1.4rem + 2.3vw, 3rem);
    --fs-display: clamp(2.6rem, 1.7rem + 4.2vw, 4.6rem);

    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-normal: 1.6;

    --measure:      66ch;
    --track-caps:   0.09em;   /* uppercase labels */
    --track-tight: -0.015em;  /* large headings */

    /* ── Spacing — multiples of 4 ──────────────────────────────────────── */
    --s1:  4px;   --s2:  8px;   --s3: 12px;  --s4: 16px;
    --s5: 20px;   --s6: 24px;   --s7: 32px;  --s8: 40px;
    --s9: 56px;   --s10: 72px;  --s11: 96px; --s12: 128px;

    --wrap:        1120px;
    --wrap-narrow:  760px;
    --gutter:      clamp(16px, 4vw, 32px);

    /* ── Shape ─────────────────────────────────────────────────────────── */
    --r-sm:   6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(14,27,33,.06), 0 1px 1px rgba(14,27,33,.04);
    --shadow-2: 0 4px 16px rgba(14,27,33,.08);
    --shadow-3: 0 16px 48px rgba(14,27,33,.16);

    /* ── Motion ────────────────────────────────────────────────────────── */
    --dur-fast: 120ms;
    --dur-med:  220ms;
    --ease:     cubic-bezier(.2,0,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);

    --z-nav:     100;
    --z-drawer:  900;
    --z-overlay: 1000;
    --z-toast:   1100;
}

/* ── Chế độ tối ──────────────────────────────────────────────
   Sáng là mặc định: ai vào lần đầu cũng thấy giao diện sáng, kể cả khi máy
   đang đặt chế độ tối. Chỉ đổi khi người dùng tự bấm nút.

   Trước đây ở đây còn một khối @media (prefers-color-scheme: dark) khiến site
   tự chuyển tối theo hệ điều hành. Đã bỏ: nó làm "mặc định" phụ thuộc máy
   người xem chứ không phải một giá trị cố định.

   Khối :root[data-theme="dark"] bên dưới GIỮ NGUYÊN — đó là thứ nút chuyển
   theme dùng, và header.php đặt lại từ localStorage trước khi trang vẽ. */

:root[data-theme="dark"] {
    --paper:       #0C1418;
    --paper-2:     #121D22;
    --surface:     #142126;
    --surface-2:   #1B2A30;
    --line:        #26383F;
    --line-strong: #5C7A85;

    --ink:         #E8EFEF;
    --ink-2:       #B4C4C6;
    --ink-3:       #8AA0A3;
    --ink-invert:  #0C1418;

    --band:        #12363F;
    --band-ink:    #E8EFEF;
    --band-ink-2:  #A9BABF;
    --band-btn:    #6FC2D2;
    --band-btn-ink:#062028;
    --scrim:       rgba(0, 0, 0, .72);

    --fig-bg:      transparent;
    --fig-ink:     #E8EFEF;
    --fig-line:    #33474F;
    --fig-line-2:  #42585F;
    --fig-muted:   #8FA6AD;
    --fig-notation:#9DB2B8;

    --brand:       #6FC2D2;
    --brand-ink:   #9BD9E4;
    --brand-wash:  #14323A;
    --brand-line:  #2E5A66;

    --signal:      #E0A552;
    --signal-wash: #33260F;
    --danger:      #F08C82;
    --danger-wash: #351714;
    --good:        #6DC79A;
    --good-wash:   #12301F;

    --d1: #6FC2D2;  --d2: #E0A552;  --d3: #8FA9D8;  --d4: #86BFA0;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 16px rgba(0,0,0,.45);
    --shadow-3: 0 16px 48px rgba(0,0,0,.6);
}