/* =====================================================================
   KH NEWS FRONT STUDIO — DESIGN SET  [KH-NEWS-THEME v2.0]
   FILE: assets/css/kh-news-themes.css
   ---------------------------------------------------------------------
   The SAME 16 designs as the E-paper Front Studio, in the same order
   and with the same names, drawn for the News front site:
     Light & Clean:        t01 Sapphire Classic, t02 Emerald Pill,
                           t03 Gazette Serif, t04 Royal Band, t05 Sky Airy
     Dark Accents:         t06 Midnight Masthead, t07 Charcoal Gold,
                           t08 Ocean Deep
     Gradient:             t09 Violet Gradient, t10 Sunset Gradient
     Full Dark:            t11 Midnight Full Dark, t12 Carbon Dark
     Compact & Corporate:  t13 Crimson Broadsheet, t14 Mono Minimal,
                           t15 Slate Corporate, t16 Teal Workhorse
   Active only when the loader sets data-khntheme on <html>.
   COLOUR / LOOK ONLY: this file sets colours, backgrounds and the
   variables the site's own header colours read. It never sets layout
   properties (no width, height, margin, padding, position, display,
   flex/grid, float or font-size) and no important flags, so the news
   site keeps its own structure exactly. Deleting the data attribute
   (choosing "Original" in Front Studio) restores the original look.
   ===================================================================== */

/* ---------- DESIGN PALETTES (variables only) ---------- */
html[data-khntheme="t01"] { --theme-primary:#1d4ed8; --topbar-bg:#1e40af; --topbar-btn-bg:#ffffff; --topbar-btn-text:#1e40af; --khn-primary-dark:#1e3a8a; --khn-bg:#f4f7fe; --khn-surface:#ffffff; --khn-text:#1f2937; --khn-heading:#111827; --khn-muted:#5b6b84; --khn-border:#d7e0f2; --khn-chip-bg:#e3ecfd; --khn-accent:#2563eb; --khn-footer-bg:#16294d; --khn-footer-text:#e7edf9; --khn-footer-bottom:#0e1c38; }
html[data-khntheme="t02"] { --theme-primary:#059669; --topbar-bg:#047857; --topbar-btn-bg:#ffffff; --topbar-btn-text:#047857; --khn-primary-dark:#065f46; --khn-bg:#eefaf4; --khn-surface:#ffffff; --khn-text:#1f2937; --khn-heading:#0c2e25; --khn-muted:#5f7a6e; --khn-border:#cdeadb; --khn-chip-bg:#d9f5e7; --khn-accent:#10b981; --khn-footer-bg:#0a3d2c; --khn-footer-text:#e2f4ec; --khn-footer-bottom:#062a1f; }
html[data-khntheme="t03"] { --theme-primary:#8a3324; --topbar-bg:#6d2415; --topbar-btn-bg:#faf3e3; --topbar-btn-text:#6d2415; --khn-primary-dark:#571f0d; --khn-bg:#faf6ee; --khn-surface:#fffdf7; --khn-text:#33302a; --khn-heading:#2a1a12; --khn-muted:#857a68; --khn-border:#e6dcc4; --khn-chip-bg:#f3e9d2; --khn-accent:#b4552d; --khn-footer-bg:#33302a; --khn-footer-text:#f0e9da; --khn-footer-bottom:#87351a; }
html[data-khntheme="t04"] { --theme-primary:#2563eb; --topbar-bg:#1e40af; --topbar-btn-bg:#ffffff; --topbar-btn-text:#1e40af; --khn-primary-dark:#172554; --khn-bg:#f5f8ff; --khn-surface:#ffffff; --khn-text:#1f2937; --khn-heading:#0f1e42; --khn-muted:#64748b; --khn-border:#dbe4f5; --khn-chip-bg:#e2ebfd; --khn-accent:#3b82f6; --khn-footer-bg:#101f42; --khn-footer-text:#e7edf9; --khn-footer-bottom:#0a1730; }
html[data-khntheme="t05"] { --theme-primary:#0284c7; --topbar-bg:#38bdf8; --topbar-btn-bg:#ffffff; --topbar-btn-text:#075985; --khn-primary-dark:#075985; --khn-bg:#f2f9fe; --khn-surface:#ffffff; --khn-text:#243b4a; --khn-heading:#0c3448; --khn-muted:#6d8fa3; --khn-border:#d6ecf8; --khn-chip-bg:#e0f2fe; --khn-accent:#0ea5e9; --khn-footer-bg:#0b3a52; --khn-footer-text:#e3f2fb; --khn-footer-bottom:#072a3d; }
html[data-khntheme="t06"] { --theme-primary:#1e3a5f; --topbar-bg:#0f2138; --topbar-btn-bg:#ffffff; --topbar-btn-text:#0f2138; --khn-primary-dark:#0b1526; --khn-bg:#f4f6fb; --khn-surface:#ffffff; --khn-text:#232a35; --khn-heading:#0d1b2e; --khn-muted:#66738a; --khn-border:#d9dfea; --khn-chip-bg:#e2e9f5; --khn-accent:#6366f1; --khn-footer-bg:#0b1526; --khn-footer-text:#dde5f2; --khn-footer-bottom:#060d18; }
html[data-khntheme="t07"] { --theme-primary:#8a6d1f; --topbar-bg:#171512; --topbar-btn-bg:#d4af37; --topbar-btn-text:#171512; --khn-primary-dark:#0f0e0c; --khn-bg:#faf7f0; --khn-surface:#fffdf8; --khn-text:#2c2a26; --khn-heading:#171512; --khn-muted:#847c6a; --khn-border:#e7ddc4; --khn-chip-bg:#f2e8cd; --khn-accent:#d4af37; --khn-footer-bg:#171512; --khn-footer-text:#efe8d4; --khn-footer-bottom:#000000; }
html[data-khntheme="t08"] { --theme-primary:#0f766e; --topbar-bg:#083f3a; --topbar-btn-bg:#d9f99d; --topbar-btn-text:#083f3a; --khn-primary-dark:#04211e; --khn-bg:#effaf8; --khn-surface:#ffffff; --khn-text:#1d2b29; --khn-heading:#06231f; --khn-muted:#5f7d78; --khn-border:#cbe8e2; --khn-chip-bg:#d7f0ea; --khn-accent:#14b8a6; --khn-footer-bg:#04211e; --khn-footer-text:#dcf2ed; --khn-footer-bottom:#02120f; }
html[data-khntheme="t09"] { --theme-primary:#7c3aed; --topbar-bg:#6d28d9; --topbar-btn-bg:#ffffff; --topbar-btn-text:#6d28d9; --khn-primary-dark:#4c1d95; --khn-bg:#f6f2ff; --khn-surface:#ffffff; --khn-text:#2b2440; --khn-heading:#2a1065; --khn-muted:#7d729e; --khn-border:#e3d9fb; --khn-chip-bg:#ece4fd; --khn-accent:#a855f7; --khn-footer-bg:#2a1065; --khn-footer-text:#ece5fd; --khn-footer-bottom:#1c0a45; }
html[data-khntheme="t10"] { --theme-primary:#ea580c; --topbar-bg:#e8590c; --topbar-btn-bg:#ffffff; --topbar-btn-text:#9a3412; --khn-primary-dark:#7c2d12; --khn-bg:#fff7ed; --khn-surface:#ffffff; --khn-text:#33231a; --khn-heading:#431407; --khn-muted:#96755e; --khn-border:#f7ddc4; --khn-chip-bg:#fdebd3; --khn-accent:#db2777; --khn-footer-bg:#431407; --khn-footer-text:#fdeede; --khn-footer-bottom:#2a0c04; }
html[data-khntheme="t11"] { --theme-primary:#6366f1; --topbar-bg:#0d1330; --topbar-btn-bg:#6366f1; --topbar-btn-text:#ffffff; --khn-primary-dark:#1e1b4b; --khn-bg:#0b1020; --khn-surface:#141a2e; --khn-text:#dbe1f2; --khn-heading:#f1f4fd; --khn-muted:#8b94b3; --khn-border:#26304f; --khn-chip-bg:#1d2745; --khn-accent:#818cf8; --khn-footer-bg:#070b18; --khn-footer-text:#c6cdea; --khn-footer-bottom:#04060f; }
html[data-khntheme="t12"] { --theme-primary:#10b981; --topbar-bg:#0c0e10; --topbar-btn-bg:#10b981; --topbar-btn-text:#06281d; --khn-primary-dark:#052e21; --khn-bg:#101214; --khn-surface:#1a1d20; --khn-text:#dde3e6; --khn-heading:#f2f5f6; --khn-muted:#8e979e; --khn-border:#2b3034; --khn-chip-bg:#22282c; --khn-accent:#34d399; --khn-footer-bg:#0a0b0c; --khn-footer-text:#ccd4d8; --khn-footer-bottom:#050606; }
html[data-khntheme="t13"] { --theme-primary:#b91c1c; --topbar-bg:#991b1b; --topbar-btn-bg:#ffffff; --topbar-btn-text:#991b1b; --khn-primary-dark:#450a0a; --khn-bg:#fdf8f4; --khn-surface:#ffffff; --khn-text:#2e2320; --khn-heading:#380a0a; --khn-muted:#8a7368; --khn-border:#efdbd2; --khn-chip-bg:#fbe9e4; --khn-accent:#dc2626; --khn-footer-bg:#380a0a; --khn-footer-text:#f6e3dc; --khn-footer-bottom:#240606; }
html[data-khntheme="t14"] { --theme-primary:#374151; --topbar-bg:#1f2937; --topbar-btn-bg:#ffffff; --topbar-btn-text:#1f2937; --khn-primary-dark:#111827; --khn-bg:#ffffff; --khn-surface:#ffffff; --khn-text:#26292e; --khn-heading:#111214; --khn-muted:#767b82; --khn-border:#e2e4e7; --khn-chip-bg:#eef0f2; --khn-accent:#4b5563; --khn-footer-bg:#f3f4f6; --khn-footer-text:#33363b; --khn-footer-bottom:#e5e7eb; }
html[data-khntheme="t15"] { --theme-primary:#475569; --topbar-bg:#334155; --topbar-btn-bg:#ffffff; --topbar-btn-text:#334155; --khn-primary-dark:#0f172a; --khn-bg:#f1f5f9; --khn-surface:#ffffff; --khn-text:#273142; --khn-heading:#0d1626; --khn-muted:#71809a; --khn-border:#d9e1ec; --khn-chip-bg:#e4eaf1; --khn-accent:#64748b; --khn-footer-bg:#0f172a; --khn-footer-text:#e2e8f0; --khn-footer-bottom:#090f1d; }
html[data-khntheme="t16"] { --theme-primary:#0d7377; --topbar-bg:#0a5c5e; --topbar-btn-bg:#ffffff; --topbar-btn-text:#0a5c5e; --khn-primary-dark:#084a4c; --khn-bg:#eef7f7; --khn-surface:#ffffff; --khn-text:#21302f; --khn-heading:#073536; --khn-muted:#64807e; --khn-border:#cfe6e5; --khn-chip-bg:#dcf0ef; --khn-accent:#14919b; --khn-footer-bg:#073536; --khn-footer-text:#e0f2f1; --khn-footer-bottom:#042324; }

/* ---------- COLOUR MAPPING (what each colour paints) ---------- */
html[data-khntheme] body { background-color: var(--khn-bg); color: var(--khn-text); }
html[data-khntheme] .nf-top-bar { background-color: var(--topbar-bg); }
html[data-khntheme] .cat-header-bar { background-color: var(--theme-primary); }
html[data-khntheme] .cat-title-text { color: #ffffff; }
html[data-khntheme] .cat-view-all-btn {
    background-color: #ffffff;
    color: var(--khn-primary-dark);
}
html[data-khntheme] .nf-live { background-color: var(--khn-primary-dark); }
html[data-khntheme] .slide-badge { background-color: var(--theme-primary); }
html[data-khntheme] .page-header { border-bottom-color: var(--theme-primary); }
html[data-khntheme] .cat-title { color: var(--khn-heading); }
html[data-khntheme] .cat-count-badge { background-color: var(--theme-primary); }
html[data-khntheme] .news-card,
html[data-khntheme] .news-body { background-color: var(--khn-surface); }
html[data-khntheme] .news-title { color: var(--khn-heading); }
html[data-khntheme] .news-date,
html[data-khntheme] .news-card-date { color: var(--khn-muted); }
html[data-khntheme] .news-title-h1 { color: var(--khn-heading); }
html[data-khntheme] .news-subtitle { color: var(--khn-muted); }
html[data-khntheme] .also-read-box { background-color: var(--khn-chip-bg); }
html[data-khntheme] .also-read-label { color: var(--theme-primary); }
html[data-khntheme] .story-icon-btn { background-color: var(--khn-chip-bg); color: var(--theme-primary); }
html[data-khntheme] .btn-danger {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}
html[data-khntheme] .text-danger { color: var(--theme-primary); }
html[data-khntheme] a { color: var(--khn-accent); }
html[data-khntheme] .site-footer {
    background-color: var(--khn-footer-bg);
    color: var(--khn-footer-text);
    border-image: none;
}
html[data-khntheme] .footer-heading { color: var(--khn-footer-text); }
html[data-khntheme] .footer-desc,
html[data-khntheme] .footer-links a,
html[data-khntheme] .footer-contact-list li { color: var(--khn-footer-text); }
html[data-khntheme] .footer-dark-bottom {
    background-color: var(--khn-footer-bottom);
    color: var(--khn-footer-text);
}