/* ============================================================
   每日新闻 — THEMES (3 switchable visual directions)
   A = Editorial Magazine (default tokens in base.css)
   B = Bold Modern
   C = Clean Colorful Grid
   ============================================================ */

/* ----------------------------------------------------------
   A · EDITORIAL MAGAZINE  (cream paper, serif, rules)
   ---------------------------------------------------------- */
[data-style="a"] {
    --font-display: 'Noto Serif SC', Georgia, serif;
    --font-body: 'Noto Sans SC', -apple-system, sans-serif;
    --font-label: 'Space Grotesk', 'Noto Sans SC', sans-serif;

    --bg-page: #f4f0e7;
    --bg-card: #fffdf8;
    --bg-rail: #f4f0e7;
    --bg-sunken: #ebe5d7;
    --line: #e3dccb;
    --line-strong: #d3c9b4;

    --ink-strong: #1b1915;
    --ink: #353029;
    --ink-soft: #6c6457;
    --ink-faint: #9c9384;

    --accent: #b5341f;
    --radius: 3px;
    --radius-lg: 4px;
    --shadow-card: none;
    --shadow-hero: none;
}
[data-style="a"] .topbar { border-bottom-width: 2px; border-bottom-color: var(--ink-strong); }
[data-style="a"] .hero-card {
    border-width: 1px;
    border-top: 4px solid var(--cat-color);
}
[data-style="a"] .cat-section-head .cs-mark { border-radius: 50%; }
[data-style="a"] .card-title { font-weight: 700; }
[data-style="a"] .hero-card .hero-title { font-style: normal; }
/* drop a hairline frame feel */
[data-style="a"] .card { box-shadow: none; }

/* ----------------------------------------------------------
   B · BOLD MODERN  (white, big sans, vivid blocks, shadows)
   ---------------------------------------------------------- */
[data-style="b"] {
    --font-display: 'Space Grotesk', 'Noto Sans SC', sans-serif;
    --font-body: 'Noto Sans SC', -apple-system, sans-serif;
    --font-label: 'Space Grotesk', 'Noto Sans SC', sans-serif;

    --bg-page: #f5f4f1;
    --bg-card: #ffffff;
    --bg-rail: #f5f4f1;
    --bg-sunken: #f0eeea;
    --line: #e7e4dd;
    --line-strong: #d8d4cb;

    --ink-strong: #14130f;
    --ink: #2c2a25;
    --ink-soft: #6a6659;
    --ink-faint: #a09a8c;

    --accent: #e0481f;

    --cat-coding: #2050e8;
    --cat-design: #e0247a;
    --cat-game:   #7c2fe6;
    --cat-music:  #06a06e;
    --cat-viral:  #f08400;

    --radius: 12px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 2px rgba(20,19,15,.04), 0 8px 24px -16px rgba(20,19,15,.2);
    --shadow-hero: 0 2px 4px rgba(20,19,15,.05), 0 24px 50px -24px rgba(20,19,15,.32);
}
[data-style="b"] .brand .logo { font-weight: 700; letter-spacing: -.03em; }
[data-style="b"] .context-head { border-bottom: none; }
[data-style="b"] .context-head .ch-title { letter-spacing: -.035em; }

/* Bold hero = white card with a strong colored top-bar + tinted accents.
   (No flooded saturated fill — keeps the energy, drops the glare.) */
[data-style="b"] .hero-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-top: 6px solid var(--cat-color);
    color: var(--ink);
    padding: 36px 40px 30px;
}
/* a soft color wash bleeds down from the top-bar for a touch of identity */
[data-style="b"] .hero-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 190px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cat-color) 9%, transparent), transparent);
    pointer-events: none; z-index: 0;
}
[data-style="b"] .hero-card .hero-title { color: var(--ink-strong); }
/* solid colored tag pill stays punchy on the light card */
[data-style="b"] .hero-card .tag { color: #fff; background: var(--tg); }
[data-style="b"] .hero-card .stat {
    background: color-mix(in srgb, var(--cat-color) 8%, var(--bg-card));
    border-left-color: var(--cat-color);
}
[data-style="b"] .hero-card .geo { opacity: .5; }

/* Bold tags = solid pills */
[data-style="b"] .tag { color: #fff; background: var(--tg); }
[data-style="b"] .cat-section-head .cs-mark { border-radius: 10px; font-size: 16px; }
[data-style="b"] .cat-section-head .cs-rule { height: 3px; border-radius: 3px; }
[data-style="b"] .card-title { font-weight: 600; letter-spacing: -.02em; }
[data-style="b"] .card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20,19,15,.05), 0 28px 50px -22px rgba(20,19,15,.34); }
[data-style="b"] .icon-btn, [data-style="b"] .search-input { border-radius: 999px; }

/* ----------------------------------------------------------
   C · CLEAN COLORFUL GRID  (cool white, structured, accent strip)
   ---------------------------------------------------------- */
[data-style="c"] {
    --font-display: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
    --font-body: 'Noto Sans SC', -apple-system, sans-serif;
    --font-label: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;

    --bg-page: #f7f8fa;
    --bg-card: #ffffff;
    --bg-rail: #f7f8fa;
    --bg-sunken: #eef1f5;
    --line: #e6e9ef;
    --line-strong: #d6dbe4;

    --ink-strong: #161a22;
    --ink: #353b46;
    --ink-soft: #69707d;
    --ink-faint: #9aa1ad;

    --accent: #3a5bd9;

    --cat-coding: #2563eb;
    --cat-design: #db2777;
    --cat-game:   #7c3aed;
    --cat-music:  #0d9488;
    --cat-viral:  #ea580c;

    --radius: 8px;
    --radius-lg: 14px;
    --shadow-card: 0 1px 2px rgba(22,26,34,.04), 0 4px 16px -10px rgba(22,26,34,.14);
    --shadow-hero: 0 2px 4px rgba(22,26,34,.05), 0 16px 40px -18px rgba(22,26,34,.2);
}
[data-style="c"] .context-head { border-bottom: 1px solid var(--line-strong); }
[data-style="c"] .context-head .ch-title { letter-spacing: -.03em; font-weight: 800; }

/* C cards carry a colored top accent strip */
[data-style="c"] .card {
    border-top: 3px solid var(--cat-color);
    padding-top: 20px;
}
[data-style="c"] .hero-card {
    border-top: 4px solid var(--cat-color);
}
[data-style="c"] .hero-card .geo { opacity: .7; }
[data-style="c"] .card-title { font-weight: 700; letter-spacing: -.015em; }
[data-style="c"] .cat-section-head .cs-mark { border-radius: 9px; }
[data-style="c"] .cat-section-head .cs-title { font-weight: 800; }
[data-style="c"] .tag { letter-spacing: .04em; }
[data-style="c"] .card:hover { transform: translateY(-2px); }
[data-style="c"] .kw { border-radius: 6px; }
[data-style="c"] .stat { border-radius: 8px; }