/* =========================================================================
 * OneGrid Web — Theme Tokens
 * -------------------------------------------------------------------------
 * Mirrors gui/themes/default.json (dark) and bright_theme.json (light).
 * The `:root[data-theme="dark|light"]` split lets the header toggle flip
 * every color-consuming rule with a single attribute change.
 * =======================================================================*/

:root[data-theme="dark"] {
    --dark-one: #1b1e23;
    --dark-two: #1e2229;
    --dark-three: #21252d;
    --dark-four: #272c36;

    --bg-one: #2c313c;
    --bg-two: #343b48;
    --bg-three: #3c4454;

    --icon-color: #c3ccdf;
    --icon-hover: #dce1ec;
    --icon-pressed: #6c99f4;
    --icon-active: #f5f6f9;

    --context-color: #568af2;
    --context-hover: #6c99f4;
    --context-pressed: #3f6fd1;

    --text-title: #dce1ec;
    --text-foreground: #8a95aa;
    --text-description: #4f5b6e;
    --text-active: #dce1ec;

    --white: #f5f6f9;
    --pink: #ff007f;
    --green: #00ff7f;
    --red: #ff5555;
    --yellow: #f1fa8c;

    --row-hover: #3f4a63;
    --row-saved: #2f4a3a;
    --row-edited: #4a4a30;
    --cell-editing: #568af2;

    --table-outline: #0a0c10;
    --id-column-bg: #3c4454;
    --id-column-fg: #c3ccdf;

    /* Header separator — matches OneGrid GUI PyDiv div_color (§3.4). */
    --header-divider: #3c4454;
    /* Text used inside the highlighted row / dropdown item so it flips
     * to the dark_two chrome shade instead of staying off-white
     * (enhancement §1.3, §6.2). */
    --text-on-highlight: #1e2229;

    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-focus: 0 0 0 3px rgba(86, 138, 242, 0.35);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --dark-one: #1b1e23;
    --dark-two: #1e2229;
    --dark-three: #21252d;
    --dark-four: #272c36;

    --bg-one: #d3e0f7;
    --bg-two: #e2e9f7;
    --bg-three: #eff1f7;

    --icon-color: #6c7c96;
    --icon-hover: #8cb8ff;
    --icon-pressed: #6c99f4;
    --icon-active: #8cb8ff;

    --context-color: #568af2;
    --context-hover: #6c99f4;
    --context-pressed: #4b5469;

    --text-title: #606c85;
    --text-foreground: #6b7894;
    --text-description: #7887a6;
    --text-active: #8797ba;

    --white: #f5f6f9;
    --pink: #ff007f;
    --green: #00ff7f;
    --red: #ff5555;
    --yellow: #f1fa8c;

    --row-hover: #c4d2f0;
    --row-saved: #c8e6d4;
    --row-edited: #f2ecc5;
    --cell-editing: #568af2;

    --table-outline: #8a97ae;
    --id-column-bg: #eff1f7;
    --id-column-fg: #6c7c96;

    /* Header separator (light theme still uses the dark chrome divider
     * — see gui/themes/bright_theme.json PyDiv usage). */
    --header-divider: #8a97ae;
    --text-on-highlight: #1e2229;

    --shadow-card: 0 4px 14px rgba(72, 88, 118, 0.18);
    --shadow-focus: 0 0 0 3px rgba(86, 138, 242, 0.28);
    color-scheme: light;
}

/* ---------- Scale / rhythm tokens (identical across themes) ------------- */
:root {
    --radius-shell: 8px;
    --radius-card: 10px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 4px; /* originally 8px */
    --space-3: 12px;
    --space-4: 8px; /* originally 16px */
    --space-5: 14px; /* originally 20px */
    --space-6: 24px;
    --space-8: 32px;

    --header-height: 45px; /* enhancement §3.5.2 — reduced from 52px */
    --subheader-height: 44px; /* originally 52px */
    --footer-height: 25px; /* originally 34px */

    --font-family: "Proxima Nova", "Segoe UI", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Arial, sans-serif;

    /* ---------- County-table metrics (user-tunable) --------------------
     * Change these four to resize the county tables app-wide:
     *   --table-header-height     → height of the sticky header row
     *   --table-row-height        → height of each body row
     *   --table-header-font-size  → header ("ID / City / Town / …") text
     *   --table-row-font-size     → body-cell text
     * The ~8-row viewport cap (`.og-table-wrap` max-height) is derived
     * from the two heights, so the scroll threshold tracks any change. */
    --table-header-height: 26px; /* Originally 34px */
    --table-row-height: 30px; /* Originally 32px */
    --table-header-font-size: 12px; /* Originally 12px */
    --table-row-font-size: 13px; /* Originally 12px */
    /* Number of body rows visible before the table scrolls. */
    --table-visible-rows: 8;

    /* ---------- Eyebrow / paragraph rhythm (Enhancement §21) ----------
     * Two knobs govern the tight vertical spacing between muted "eyebrow"
     * labels (Welcome, / Event Type / Event Window / Event Discussion
     * subtitle) and the primary text sitting beneath them:
     *
     *   --eyebrow-space       — vertical gap between the eyebrow line and
     *                           its primary text. Pulls the pair visually
     *                           closer together. Default 0px (flush).
     *   --eyebrow-line-height — line-height applied to the eyebrow label
     *                           so trailing leading doesn't add extra
     *                           space beneath the muted text.
     *   --paragraph-space     — vertical gap between paragraphs in the
     *                           discussion body / main body copy. Bump
     *                           for more breathing room, tighten for
     *                           density.
     * -------------------------------------------------------------- */
    --eyebrow-space: 0px;
    --eyebrow-line-height: 1;
    --paragraph-space: 8px;

    /* Enhancement §7 — drop-shadow toggle. window.OG_CONFIG.drop_shadow
     * = false is applied at boot in js/theme.js by setting
     * data-shadows="off" on <html>, which the rule below swaps every
     * card / shell shadow to `none`. */
    --collapsed-logo-opacity: 0.25;
}

:root[data-shadows="off"] {
    --shadow-card: none;
}

/* ---------- Icon tinting ------------------------------------------------
 * The provided icon SVGs hard-code fills like #c3ccdf / #e6e6e6. Using
 * an `img` tag we can't rewrite the fill directly, but we can approximate
 * a "recolor" through CSS filters when the theme flips. Icons are grayscale
 * SVGs, so a hue-rotate-safe brightness shift is enough for parity with the
 * OneGrid Qt icon_color rules.
 * ---------------------------------------------------------------------- */
:root[data-theme="light"] .og-icon-btn img,
:root[data-theme="light"] .og-toggle__icon,
:root[data-theme="light"] .og-county-card__header .og-icon-btn img {
    filter: brightness(0) saturate(100%) invert(52%) sepia(9%) saturate(760%)
        hue-rotate(190deg) brightness(88%) contrast(88%);
}