/* ============================================================
   ROOT — design tokens only. No selectors beyond :root here.
   Loaded on every page since base/header/footer/single/front-page
   all reference these custom properties.

   Palette lifted from the Benqu theme demo
   (itcroctheme.com/wp/demos/themes/benqu), sampled off the live
   page: body #f9faff, headings #1d2027, body copy #434343,
   primary #5541f8, footer #0a0d12, and the category badge hues
   (#fc16a8 / #ffae25 / #52a815 / #007bff / #00baff / #ff4f00 /
   #ff002a / #7fc61b) each category carries as term meta.
   ============================================================ */

:root {
    /* Base surfaces */
    --c-bg: #f9faff;             /* Benqu page background */
    --c-surface: #ffffff;        /* cards */
    --c-surface-tint: #eef0fa;   /* image placeholder / muted panel */

    /* Text */
    --c-ink: #1d2027;            /* Benqu heading color */
    --c-ink-soft: #434343;       /* Benqu body copy */
    --c-ink-faint: #8a8f9c;      /* meta / labels */

    /* Brand accent — Benqu's primary (LOGIN button, active dots) */
    --c-accent: #5541f8;
    --c-accent-deep: #3a27d9;    /* pressed / hover state */

    /* Benqu's brightest badge hue, used for the top bar's ticker hover
       where the indigo accent has no contrast against the navy. */
    --c-lime: #7fc61b;           /* Benqu "Heroes" green */

    /* Lines & effects */
    --c-border: #e6e9f4;
    --c-border-strong: #cdd2e2;
    --c-shadow: rgba(29, 32, 39, 0.1);
    --c-glow: rgba(85, 65, 248, 0.25);
    --c-selection-bg: var(--c-accent);
    --c-selection-ink: #ffffff;

    /* Benqu darkens hero imagery from the bottom up so overlaid
       white text stays readable over any photo. */
    --grad-media-scrim: linear-gradient(
        to top,
        rgba(10, 18, 51, 0.92) 0%,
        rgba(10, 18, 51, 0.55) 38%,
        rgba(10, 18, 51, 0) 72%
    );

    /* Shape — Benqu is a flat, small-radius theme; its category chip
       has one square corner, which is the shape's whole signature. */
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-badge: 0 30px 30px 30px;

    /* Type — Benqu pairs a condensed display face with a geometric
       grotesque for body copy. Its own faces (Encode Sans Condensed,
       DM Sans) ship Latin only, so the primary families here are the
       closest Cyrillic-complete equivalents; the Benqu originals stay
       in the stack as fallbacks for Latin text.
       Onest, not Manrope, for the body: Manrope carries Bulgarian
       localized Cyrillic (и→u, т→m under lang="bg-BG"), which the
       condensed display face does not, so the two would not match. */
    --font-body: "Onest", "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Fira Sans Condensed", "Encode Sans Condensed", "Arial Narrow", var(--font-body);
}

/* Dark scheme — same tokens, different values, built off Benqu's
   navy (#0a1233, the demo's top bar). Delete this block if the site
   is ever made light-only. */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #0a1233;
        --c-surface: #111a3f;
        --c-surface-tint: #17204a;
        --c-ink: #f4f6ff;
        --c-ink-soft: #c3c9de;
        --c-ink-faint: #8f96ad;
        --c-accent: #8a7bff;
        --c-accent-deep: #a89dff;
        --c-lime: #9ada2f;
        --c-border: #232d57;
        --c-border-strong: #35406e;
        --c-shadow: rgba(0, 0, 0, 0.5);
        --c-glow: rgba(138, 123, 255, 0.35);
    }
}

/* The top bar and the footer are fixed dark bands in BOTH schemes
   (Benqu does the same), so these are NOT overridden in the block
   above. Values sampled off the demo: top bar #0a1233, footer
   #0a0d12, footer body copy #dbdbdb, tag chip border #41464e. */
:root {
    --c-topbar-bg: #0a1233;
    --c-topbar-ink: #f0f0f0;
    --c-topbar-ink-soft: #d2d3d3;

    --c-footer-bg: #0a0d12;
    --c-footer-ink: #ffffff;
    --c-footer-ink-soft: #dbdbdb;
    --c-footer-border: rgba(255, 255, 255, 0.1);
    --c-footer-chip-border: #41464e;
}