/*
 * user-appearance.css — applies user pref overrides via <html data-*> attrs.
 * Loaded globally after design-tokens.css + ui-components.css.
 *
 * Scope: only changes design tokens — never component shapes.
 * Dark mode: overrides surface/text/border tokens (trộn từ token gốc, không hex). Màu thương hiệu giữ nguyên.
 */

/* ─── Font size scaling ──────────────────────────────────────────── */
html[data-font-size="small"] {
    font-size: 14.5px;
}
html[data-font-size="default"] {
    font-size: 16px;
}
html[data-font-size="large"] {
    font-size: 17.5px;
}

/* ─── Reduce animation ───────────────────────────────────────────── */
html[data-reduce-anim="1"] *,
html[data-reduce-anim="1"] *::before,
html[data-reduce-anim="1"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ─── Light theme (explicit) ─────────────────────────────────────── */
/* Force browser UI (scrollbars, datepicker, form controls) to light variants. */
html[data-user-theme="light"] {
    color-scheme: light;
}

/* ─── Dark theme ─────────────────────────────────────────────────── */
/* Chỉ áp ở trang đã soát token (templates/header.php ép 'light' nếu lv_dark_ready() = false). Không đụng
   --color-on-dark / --color-inverse-surface: chữ trắng trên dải màu và nền toast giữ nguyên ở cả hai chế độ. */
html[data-user-theme="dark"] {
    /* Nền + chữ: trộn từ hai token KHÔNG lật (--color-inverse-surface = mực đậm, --color-on-dark = trắng) — không hex,
       không vòng biến. Bản cũ khai --color-bg: var(--color-ink) trong khi --color-ink: var(--color-bg) ⇒ vòng ⇒ mọi màu
       thành rỗng (nền trong suốt, chữ mặc định) — đó là lý do nền tối phải tắt toàn site. Sửa 20/10/2026 theo NAVS. */
    --color-bg:        var(--color-inverse-surface);
    --color-surface:   color-mix(in srgb, var(--color-on-dark) 7%, var(--color-inverse-surface));
    --color-soft:      color-mix(in srgb, var(--color-on-dark) 11%, var(--color-inverse-surface));
    --color-border:    color-mix(in srgb, var(--color-on-dark) 19%, var(--color-inverse-surface));
    --color-line:      color-mix(in srgb, var(--color-on-dark) 9%, var(--color-inverse-surface));
    --color-ink:       color-mix(in srgb, var(--color-on-dark) 97%, var(--color-inverse-surface));
    --color-text:      color-mix(in srgb, var(--color-on-dark) 89%, var(--color-inverse-surface));
    --color-secondary-text: color-mix(in srgb, var(--color-on-dark) 80%, var(--color-inverse-surface));
    --color-muted:     var(--color-locked);
    --color-mute2:     color-mix(in srgb, var(--color-locked) 68%, var(--color-inverse-surface));
    --color-locked-soft: color-mix(in srgb, var(--color-on-dark) 11%, var(--color-inverse-surface));
    --color-locked-deep: color-mix(in srgb, var(--color-on-dark) 80%, var(--color-inverse-surface));
    --color-snackbar:  color-mix(in srgb, var(--color-on-dark) 19%, var(--color-inverse-surface));
    /* -deep = CHỮ trên nền -soft → ở nền tối phải là bản SÁNG mới đọc được */
    --color-primary-deep:   color-mix(in srgb, var(--color-primary) 42%, var(--color-on-dark));
    --color-secondary-deep: color-mix(in srgb, var(--color-secondary) 38%, var(--color-on-dark));
    --color-accent-deep:    color-mix(in srgb, var(--color-accent) 48%, var(--color-on-dark));
    --color-warning-deep:   color-mix(in srgb, var(--color-warning) 62%, var(--color-on-dark));
    --color-correct-deep:   color-mix(in srgb, var(--color-correct) 55%, var(--color-on-dark));
    --color-success-deep:   color-mix(in srgb, var(--color-correct) 55%, var(--color-on-dark));
    --color-correct-soft:   color-mix(in srgb, var(--color-correct) 20%, transparent);
    --color-success-soft:   color-mix(in srgb, var(--color-correct) 20%, transparent);
    --color-incorrect-soft: color-mix(in srgb, var(--color-incorrect) 20%, transparent);   /* 28/10/2026: thiếu ⇒ ô "sai" hồng chói ở nền tối */
    --color-primary-soft:   color-mix(in srgb, var(--color-primary) 24%, transparent);
    --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 30%, transparent);
    --color-accent-soft:    color-mix(in srgb, var(--color-accent) 22%, transparent);
    --color-warning-soft:   color-mix(in srgb, var(--color-warning) 18%, transparent);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent);
    color-scheme: dark;
}

/* System — follows OS pref */
@media (prefers-color-scheme: dark) {
    html[data-user-theme="system"] {
        /* Nền + chữ: trộn từ hai token KHÔNG lật (--color-inverse-surface = mực đậm, --color-on-dark = trắng) — không hex,
           không vòng biến. Bản cũ khai --color-bg: var(--color-ink) trong khi --color-ink: var(--color-bg) ⇒ vòng ⇒ mọi màu
           thành rỗng (nền trong suốt, chữ mặc định) — đó là lý do nền tối phải tắt toàn site. Sửa 20/10/2026 theo NAVS. */
        --color-bg:        var(--color-inverse-surface);
        --color-surface:   color-mix(in srgb, var(--color-on-dark) 7%, var(--color-inverse-surface));
        --color-soft:      color-mix(in srgb, var(--color-on-dark) 11%, var(--color-inverse-surface));
        --color-border:    color-mix(in srgb, var(--color-on-dark) 19%, var(--color-inverse-surface));
        --color-line:      color-mix(in srgb, var(--color-on-dark) 9%, var(--color-inverse-surface));
        --color-ink:       color-mix(in srgb, var(--color-on-dark) 97%, var(--color-inverse-surface));
        --color-text:      color-mix(in srgb, var(--color-on-dark) 89%, var(--color-inverse-surface));
        --color-secondary-text: color-mix(in srgb, var(--color-on-dark) 80%, var(--color-inverse-surface));
        --color-muted:     var(--color-locked);
        --color-mute2:     color-mix(in srgb, var(--color-locked) 68%, var(--color-inverse-surface));
        --color-locked-soft: color-mix(in srgb, var(--color-on-dark) 11%, var(--color-inverse-surface));
        --color-locked-deep: color-mix(in srgb, var(--color-on-dark) 80%, var(--color-inverse-surface));
        --color-snackbar:  color-mix(in srgb, var(--color-on-dark) 19%, var(--color-inverse-surface));
        /* -deep = CHỮ trên nền -soft → ở nền tối phải là bản SÁNG mới đọc được */
        --color-primary-deep:   color-mix(in srgb, var(--color-primary) 42%, var(--color-on-dark));
        --color-secondary-deep: color-mix(in srgb, var(--color-secondary) 38%, var(--color-on-dark));
        --color-accent-deep:    color-mix(in srgb, var(--color-accent) 48%, var(--color-on-dark));
        --color-warning-deep:   color-mix(in srgb, var(--color-warning) 62%, var(--color-on-dark));
        --color-correct-deep:   color-mix(in srgb, var(--color-correct) 55%, var(--color-on-dark));
    --color-success-deep:   color-mix(in srgb, var(--color-correct) 55%, var(--color-on-dark));
    --color-correct-soft:   color-mix(in srgb, var(--color-correct) 20%, transparent);
    --color-success-soft:   color-mix(in srgb, var(--color-correct) 20%, transparent);
        --color-incorrect-soft: color-mix(in srgb, var(--color-incorrect) 20%, transparent);
        --color-primary-soft:   color-mix(in srgb, var(--color-primary) 24%, transparent);
        --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 30%, transparent);
        --color-accent-soft:    color-mix(in srgb, var(--color-accent) 22%, transparent);
        --color-warning-soft:   color-mix(in srgb, var(--color-warning) 18%, transparent);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
        --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent);
        color-scheme: dark;
    }
}

/* Body background follows token */
html[data-user-theme="dark"] body,
html[data-user-theme="system"] body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ─── Accent color picker — ONLY swaps decorative accents, NOT primary CTA ───
   Bug cũ: ghi đè --color-primary làm toàn bộ button Save/Submit chuyển sang amber/cyan
   → mất brand identity teal. Nay scope chỉ đổi --user-accent (token riêng cho
   highlight decoration). Primary CTA luôn giữ màu thương hiệu (--color-primary). */
html, html[data-accent="teal"]    { --user-accent: var(--color-primary); }
html[data-accent="emerald"]       { --user-accent: var(--color-accent); }
html[data-accent="cyan"]          { --user-accent: var(--color-accent); }
html[data-accent="amber"]         { --user-accent: var(--color-warning); }

/* ─── Highlight color (user pref: vocab/reading text highlights) ───── */
html[data-highlight="cyan"]    { --color-highlight: var(--color-accent); --color-highlight-soft: rgba(180, 90, 60,0.18); }
html[data-highlight="amber"]   { --color-highlight: var(--color-warning); --color-highlight-soft: rgba(245,158,11,0.20); }
html[data-highlight="emerald"] { --color-highlight: var(--color-accent); --color-highlight-soft: rgba(185, 28, 28,0.18); }

mark, .text-highlight, .vb-highlight, .rdg-highlight, .vocab-highlight {
    background: var(--color-highlight-soft, rgba(180, 90, 60,0.18));
    color: var(--color-highlight, var(--color-accent));
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: var(--fw-semibold);
}

/* ─── Compact sidebar (when user pref enabled) ───────────────────────── */
@media (min-width: 1024px) {
    html[data-compact-sb="1"] .sb {
        width: var(--sb-width-mini) !important;
    }
    html[data-compact-sb="1"] body.has-sidebar {
        padding-left: var(--sb-width-mini) !important;
    }
    html[data-compact-sb="1"] .sb__label,
    html[data-compact-sb="1"] .sb__plan {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ─── Reading layout (compact = tighter line-height on long-form text) ─ */
html[data-user-theme] .protected-content p,
html[data-user-theme] .reading-passage,
html[data-user-theme] .passage-body,
html[data-user-theme] article {
    line-height: 1.7;
}
html[data-reading-layout="compact"] .reading-passage,
html[data-reading-layout="compact"] .passage-body,
html[data-reading-layout="compact"] article {
    line-height: 1.5;
    font-size: 0.95em;
}

/* IELTS Reading passage font size (per-module pref) */
.rp-page[data-rdg-font="small"]   .passage-body,
.rp-page[data-rdg-font="small"]   .rdg-passage,
.rp-page[data-rdg-font="small"]   details p { font-size: 0.92em; }
.rp-page[data-rdg-font="large"]   .passage-body,
.rp-page[data-rdg-font="large"]   .rdg-passage,
.rp-page[data-rdg-font="large"]   details p { font-size: 1.1em; line-height: 1.8; }

/* Reading focus mode — dim chrome, center content */
.rp-page.is-focus .navbar,
.rp-page.is-focus .sb,
.rp-page.is-focus .footer,
body:has(.rp-page.is-focus) .navbar,
body:has(.rp-page.is-focus) .sb { filter: opacity(0.25); transition: filter .25s ease; }
body:has(.rp-page.is-focus) .navbar:hover,
body:has(.rp-page.is-focus) .sb:hover { filter: opacity(1); }