/* ─────────────────────────────────────────────────────────────────────
 * site-deu.css — bảng màu NAVS Deutsch ("Cờ Đức tinh chỉnh", màu chính ĐỎ ĐÔ — chủ chọn 12/10/2026), nạp NGAY SAU design-tokens.css
 * (SITE_THEME_CSS trong config/site.local.php). Chỉ ghi đè token MÀU; font giữ y hệt NAVS (chủ chốt 11/10/2026).
 * Đây là tệp ĐỊNH NGHĨA token (như design-tokens.css) nên các dòng hex mang nhãn theme-allow; trang vẫn chỉ dùng var(--color-*).
 *
 * Đỏ đô #9F1239 là màu chính (dải đầu trang học, thẻ tối, nút của app) — chữ trắng trên đỏ đô 7,6:1. Chữ thường vẫn than #18181B
 * (--color-ink). Trước 12/10/2026 màu chính là than — chủ thấy "đen hơi xấu"; đã xem trước navy / đỏ đô / chàm và chọn đỏ đô.
 * Chữ vàng trên nền đỏ đô: dùng vàng pha trắng (--color-brand-gold-on-dark), vàng gốc chỉ 3,3:1.
 * Vàng #EAB308 chỉ làm NỀN nút hành động chính, chữ trên nó luôn là than (vàng làm chữ trên nền trắng chỉ 2:1).
 * Đỏ chỉ dùng đồ hoạ (sọc logo); cần chữ đỏ thì --color-brand-red-text.
 * der / die / das: xanh dương / đỏ hồng / xanh lá theo quy ước giáo trình — web tiếng Đức có bảng màu riêng,
 * luật "cấm xanh dương / đỏ" trong CLAUDE.md của NAVS KHÔNG áp ở đây (xem .claude/rules/deu.md).
 * ───────────────────────────────────────────────────────────────────── */

:root {
    --color-primary:        #9F1239; /* theme-allow: token */
    --color-primary-hover:  #BE123C; /* theme-allow: token */
    --color-primary-soft:   #F8E8EC; /* theme-allow: token — khác --color-gender-die-soft (#FFE4E6) */
    --color-primary-deep:   #4C0519; /* theme-allow: token */
    --color-brand-gold-on-dark: color-mix(in srgb, #EAB308 72%, #FFFFFF); /* theme-allow: token — chữ vàng trên nền đỏ đô */

    --color-accent:        #CA8A04; /* theme-allow: token */
    --color-accent-hover:  #A16207; /* theme-allow: token */
    --color-accent-soft:   #FEF9C3; /* theme-allow: token */
    --color-accent-deep:   #713F12; /* theme-allow: token */

    --color-brand-gold:       #EAB308; /* theme-allow: token */
    --color-brand-gold-hover: #CA8A04; /* theme-allow: token */
    --color-brand-red:        #DC2626; /* theme-allow: token */
    --color-brand-red-text:   #B91C1C; /* theme-allow: token */

    --color-bg:    #FAFAFA; /* theme-allow: token */
    --color-ink:   #18181B; /* theme-allow: token */
    --color-text:  #18181B; /* theme-allow: token */
    --color-secondary-text: #3F3F46; /* theme-allow: token */
    --color-muted: #52525B; /* theme-allow: token */
    --color-border: #E4E4E7; /* theme-allow: token */

    --shadow-focus: 0 0 0 3px rgba(234, 179, 8, .35);

    /* Giống của danh từ — nền (base), nền nhạt (soft), chữ (fg, đạt 4,5:1 trên soft và trên trắng). */
    --color-gender-der: #2563EB;  --color-gender-der-soft: #DBEAFE;  --color-gender-der-fg: #1E40AF; /* theme-allow: token */
    --color-gender-die: #E11D48;  --color-gender-die-soft: #FFE4E6;  --color-gender-die-fg: #9F1239; /* theme-allow: token */
    --color-gender-das: #16A34A;  --color-gender-das-soft: #DCFCE7;  --color-gender-das-fg: #166534; /* theme-allow: token */
    --color-gender-pl:  #71717A;  --color-gender-pl-soft:  #F4F4F5;  --color-gender-pl-fg:  #3F3F46; /* theme-allow: token */
}

/* Nút hành động chính: nền vàng, chữ than. includes/theme.php in luật .btn-primary kèm !important SAU tệp này
   ⇒ bộ chọn mạnh hơn (.btn.btn-primary) cùng !important mới thắng. */
.btn.btn-primary {
    background: var(--color-brand-gold) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-brand-gold) !important;
    box-shadow: 0 4px 12px rgba(234, 179, 8, .25) !important;
}
.btn.btn-primary:hover:not(:disabled) {
    background: var(--color-brand-gold-hover) !important;
    border-color: var(--color-brand-gold-hover) !important;
    color: var(--color-ink) !important;
}

/* Chữ tiếng Đức (từ ghép dài) — tự ngắt dòng đúng chỗ thay vì tràn khung trên điện thoại. */
[lang="de"] { hyphens: auto; overflow-wrap: break-word; }

/* Giống trên nền tối: nền đậm, chữ sáng (cùng sắc, đạt 4,5:1). */
html[data-user-theme="dark"] {
    --color-gender-der-soft: #1E3A8A;  --color-gender-der-fg: #BFDBFE; /* theme-allow: token */
    --color-gender-die-soft: #881337;  --color-gender-die-fg: #FECDD3; /* theme-allow: token */
    --color-gender-das-soft: #14532D;  --color-gender-das-fg: #BBF7D0; /* theme-allow: token */
    --color-gender-pl-soft:  #3F3F46;  --color-gender-pl-fg:  #E4E4E7; /* theme-allow: token */
}

/* Chế độ TỐI (13/10/2026): user-appearance.css lật --color-primary-deep / -soft sang TEAL của NAVS ⇒ mục menu đang chọn, chữ nhấn
   trên thẻ thành xanh ngọc. Đè lại bằng đỏ đô pha sáng (chữ) / đỏ đô trong suốt (nền). Hai khối: tối chọn tay + "theo hệ thống". */
html[data-user-theme="dark"]:root {   /* :root ⇒ thắng user-appearance.css khi tệp đó nạp SAU (trang app học) */
    --color-primary-deep: color-mix(in srgb, var(--color-primary) 32%, var(--color-on-dark));
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
@media (prefers-color-scheme: dark) {
    html[data-user-theme="system"]:root {
        --color-primary-deep: color-mix(in srgb, var(--color-primary) 32%, var(--color-on-dark));
        --color-primary-soft: color-mix(in srgb, var(--color-primary) 30%, transparent);
        --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent);
    }
}
/* Logo chữ than (logo.svg) chìm trên thanh bên / thanh trên tối ⇒ thay bản chữ sáng logo-dark.svg (+ mark-dark.svg khi thu gọn).
   Ảnh <img> giữ chỗ (trong suốt), logo tối vẽ bằng nền của thẻ <a> — chạy mọi trình duyệt, không cần sửa learn_nav.php (dùng chung). */
html[data-user-theme="dark"] .lv-brand__full,
html[data-user-theme="dark"] .lv-brand__mark,
html[data-user-theme="dark"] #hsk-navbar.is-solid .lv-top__logo-full,
html[data-user-theme="dark"] #hsk-navbar.is-scrolled .lv-top__logo-full { opacity: 0; }
html[data-user-theme="dark"] .lv-brand { background: url("../../public/assets/brand-deu/logo-dark.svg") 12px center / auto 44px no-repeat; }
html[data-user-theme="dark"] .is-side-mini .lv-brand { background-image: url("../../public/assets/brand-deu/mark-dark.svg"); background-size: auto 38px; }
html[data-user-theme="dark"] #hsk-navbar.is-solid .lv-top__logo,
html[data-user-theme="dark"] #hsk-navbar.is-scrolled .lv-top__logo { background: url("../../public/assets/brand-deu/logo-dark.svg") left center / auto 34px no-repeat; }
@media (prefers-color-scheme: dark) {
    html[data-user-theme="system"] .lv-brand__full,
    html[data-user-theme="system"] .lv-brand__mark,
    html[data-user-theme="system"] #hsk-navbar.is-solid .lv-top__logo-full,
    html[data-user-theme="system"] #hsk-navbar.is-scrolled .lv-top__logo-full { opacity: 0; }
    html[data-user-theme="system"] .lv-brand { background: url("../../public/assets/brand-deu/logo-dark.svg") 12px center / auto 44px no-repeat; }
    html[data-user-theme="system"] .is-side-mini .lv-brand { background-image: url("../../public/assets/brand-deu/mark-dark.svg"); background-size: auto 38px; }
    html[data-user-theme="system"] #hsk-navbar.is-solid .lv-top__logo,
    html[data-user-theme="system"] #hsk-navbar.is-scrolled .lv-top__logo { background: url("../../public/assets/brand-deu/logo-dark.svg") left center / auto 34px no-repeat; }
}

/* Dải màu đầu trang trên điện thoại (#hsk-navbar.is-band, chưa cuộn): learn-shell.css (dùng chung NAVS) ĐẢO TRẮNG logo bằng filter — hợp
   với logo một màu của NAVS, nhưng cờ D ba sọc thành khối trắng có vạch ở chỗ nối (khách báo 17/10/2026). Web Đức dùng bản logo nền tối:
   cờ giữ màu, viền sáng, chữ sáng — cùng cách thay logo ở chế độ tối phía trên. */
#hsk-navbar.is-band:not(.is-scrolled) .lv-top__logo-full { filter: none; opacity: 0; }
#hsk-navbar.is-band:not(.is-scrolled) .lv-top__logo { background: url("../../public/assets/brand-deu/logo-dark.svg") left center / auto 34px no-repeat; }

/* Chip giống đứng trước danh từ (navsDe.titleHtml) và dòng số nhiều / Perfekt (navsDe.formsHtml). */
.de-g {
    display: inline-block; margin-right: .32em; padding: .06em .42em; border-radius: .42em;
    font-size: .6em; font-weight: 700; line-height: 1.35; letter-spacing: 0; vertical-align: .2em;
    background: var(--color-gender-der-soft); color: var(--color-gender-der-fg);
}
.de-g--die { background: var(--color-gender-die-soft); color: var(--color-gender-die-fg); }
.de-g--das { background: var(--color-gender-das-soft); color: var(--color-gender-das-fg); }
.de-form {
    display: inline-block; margin-left: .5em; padding: .05em .45em; border-radius: .4em; font-size: .92em;
    background: var(--color-gender-pl-soft); color: var(--color-gender-pl-fg);
}
.de-form:first-child { margin-left: 0; }


/* Trang đăng nhập (public/auth/login.php): khung logo canh cho logo VUÔNG của NAVS (cao 128px); logo NAVS Deutsch là chữ dài
   ⇒ thấp lại. Hai lớp để thắng luật cùng tên trong <style> của trang (tệp này được gắn TRƯỚC khối đó). */
.au-toplogo .au-toplogo-mark { height: 46px; }

/* ── Trang đăng nhập / đăng ký: giao diện "Cờ Đức tinh chỉnh" (12/10/2026) — chỉ bằng CSS, KHÔNG sửa login.php (tệp dùng chung).
   Luật trong <style> của trang đứng SAU tệp này ⇒ mọi bộ chọn ở đây mạnh hơn một bậc (body > …, .au-form-box …).
   Khung thương hiệu bên trái = body::before (body của trang là flex) + ảnh public/assets/brand-deu/login-panel.svg; chỉ hiện khi
   trang CHƯA có khung riêng (bản đăng nhập mới của NAVS có <aside class="au3-side"> đứng trước ⇒ :first-child hết khớp, tự tắt). */
body > .au-form-panel {
    background:
        radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--color-brand-gold) 20%, transparent), transparent 64%),
        radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--color-brand-red) 5%, transparent), transparent 60%),
        color-mix(in srgb, var(--color-brand-gold) 4%, var(--color-surface));
}
body > .au-form-panel .au-form-box {
    border-radius: 22px;
    box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--color-ink) 30%, transparent),
                0 6px 18px -10px color-mix(in srgb, var(--color-ink) 16%, transparent);
}
.au-form-box .au-btn {
    background: var(--color-brand-gold); color: var(--color-ink);
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--color-brand-gold-hover) 90%, transparent);
}
.au-form-box .au-btn:hover { background: var(--color-brand-gold-hover); color: var(--color-ink);
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--color-brand-gold-hover) 95%, transparent); }
@media (min-width: 1024px) {
    body:has(> .au-form-panel:first-child)::before {
        content: ''; flex: 0 0 46%; position: sticky; top: 0; align-self: flex-start; height: 100vh;
        background:
            url("../../public/assets/brand-deu/login-panel.svg") center / min(460px, 76%) auto no-repeat,
            radial-gradient(circle, color-mix(in srgb, var(--color-on-dark) 9%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
            radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--color-brand-gold) 34%, transparent), transparent 62%),
            radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--color-brand-red) 22%, transparent), transparent 60%),
            linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
    }
}

/* Màu nhấn trên dải tối của app học (learn-shell.css: --lv-mint = màu chính pha trắng — với than ra XÁM): chữ nhấn tiêu đề
   (Bảng giá, Cửa hàng, Hôm nay…), thanh tiến độ trên nền tối ⇒ vàng nhạt. :root:root để thắng :root của learn-shell.css (nạp sau). */
:root:root { --lv-mint: color-mix(in srgb, var(--color-brand-gold) 82%, var(--color-on-dark)); }