/* BHIS design tokens — aligned with blackhillsinfosec.com (charcoal, gold, rust) */

:root {
    --font-display: "Bebas Neue", "Segoe UI", sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", sans-serif;

    /* Standard type scale — the only four text sizes used across the site.
       Headings (h1–h4) keep their own scale inside rich text. */
    --text-size-eyebrow: 0.72rem;
    --text-size-body: 1rem;
    --text-size-subtitle: 1.15rem;
    --text-size-title: clamp(1.75rem, 3vw, 2.35rem);
    /* Hero display size — larger than section titles for first-viewport impact */
    --text-size-hero: clamp(2.6rem, 6.5vw, 4.25rem);

    /* Brand palette (shared) */
    --bhis-charcoal: #242525;
    --bhis-charcoal-deep: #1a1b1b;
    --bhis-slate: #3a3d3d;
    --bhis-gold: #f5b335;
    --bhis-gold-dim: #c8871a;
    --bhis-rust: #d4633f;
    --bhis-rust-deep: #b84a2a;
    --bhis-cream: #f4f2ec;
    --bhis-cream-muted: #e8e4db;
    --bhis-navy: #1a2332;
    --bhis-navy-mid: #2d3f5c;

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --nav-height: 4.25rem;
    /* Sticky banner + nav; JS (site-chrome-offset.js) updates this when a top banner is present. */
    --site-chrome-height: var(--nav-height);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.14);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

/* Dark — default BHIS look */
html[data-theme="dark"] {
    color-scheme: dark;

    --page-bg: var(--bhis-charcoal);
    --page-bg-elevated: var(--bhis-charcoal-deep);
    --surface-bg: #2f3232;
    --surface-bg-hover: #3a3d3d;
    --carousel-backdrop: var(--bhis-charcoal-deep);
    --text-primary: #e8e6e3;
    --body-color: var(--text-primary);
    --text-muted: #b5b2ad;
    --heading-color: #faf9f7;
    --border-color: #494e4e;
    --border-color-strong: #5c6363;
    /* Aliases used by admin grids / older chrome. */
    --surface: var(--surface-bg);
    --surface-border: var(--border-color);

    --link-color: #f5c85a;
    --link-hover-color: #ffe08a;
    --accent-gold: var(--bhis-gold);
    --accent-rust: var(--bhis-rust);
    --accent-primary: var(--bhis-gold);
    --accent-on-primary: var(--bhis-charcoal-deep);

    --hero-gradient: linear-gradient(135deg, #141618 0%, var(--bhis-navy) 42%, var(--bhis-navy-mid) 100%);
    --hero-text: #faf9f7;
    --hero-eyebrow: var(--bhis-gold);
    --glow: 0 0 60px color-mix(in srgb, var(--accent-gold) 12%, transparent);

    --btn-primary-bg: var(--bhis-gold);
    --btn-primary-border: #e0a42e;
    --btn-primary-text: var(--bhis-charcoal-deep);
    --btn-primary-hover-bg: #ffc04d;
    --btn-outline-border: color-mix(in srgb, var(--bhis-gold) 55%, var(--border-color));

    --input-bg: #2a2d2d;
    --input-border: var(--border-color);
    --input-text: var(--text-primary);
    --input-placeholder: #8a8782;

    --header-bg: color-mix(in srgb, var(--page-bg) 88%, transparent);
    --footer-bg: color-mix(in srgb, var(--surface-bg) 75%, var(--page-bg));
    --code-bg: var(--bhis-slate); /* #3a3d3d — match theme toggle */
}

/* Light */
html[data-theme="light"] {
    color-scheme: light;

    --page-bg: var(--bhis-cream);
    --page-bg-elevated: #ffffff;
    --surface-bg: #ffffff;
    --surface-bg-hover: var(--bhis-cream-muted);
    --carousel-backdrop: #20242b;
    --text-primary: #2a2a28;
    --body-color: var(--text-primary);
    --text-muted: #5c5a55;
    --heading-color: #141414;
    --border-color: #d4cfc4;
    --border-color-strong: #b8b2a6;
    /* Aliases used by admin grids / older chrome. */
    --surface: var(--surface-bg);
    --surface-border: var(--border-color);

    --link-color: #9a5c12;
    --link-hover-color: var(--bhis-rust-deep);
    --accent-gold: var(--bhis-gold-dim);
    --accent-rust: var(--bhis-rust-deep);
    --accent-primary: var(--bhis-gold-dim);
    --accent-on-primary: #ffffff;

    --hero-gradient: linear-gradient(135deg, #2a3548 0%, #3d5275 48%, #4a6290 100%);
    --hero-text: #ffffff;
    --hero-eyebrow: #ffe08a;
    --glow: 0 0 48px color-mix(in srgb, var(--accent-gold) 18%, transparent);

    --btn-primary-bg: var(--bhis-rust);
    --btn-primary-border: var(--bhis-rust-deep);
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #e07552;
    --btn-outline-border: color-mix(in srgb, var(--bhis-rust) 40%, var(--border-color));

    --input-bg: #ffffff;
    --input-border: var(--border-color);
    --input-text: var(--text-primary);
    --input-placeholder: #8a857c;

    --header-bg: color-mix(in srgb, var(--page-bg) 92%, transparent);
    --footer-bg: color-mix(in srgb, var(--bhis-cream-muted) 60%, var(--page-bg));
    --code-bg: #ebe8e1;
}

/* Fallback before JS — match first-visit default (light), not dark */
html:not([data-theme]) {
    color-scheme: light;
    --page-bg: var(--bhis-cream);
    --page-bg-elevated: #ffffff;
    --surface-bg: #ffffff;
    --surface-bg-hover: var(--bhis-cream-muted);
    --text-primary: #2a2a28;
    --body-color: var(--text-primary);
    --text-muted: #5c5a55;
    --heading-color: #141414;
    --border-color: #d4cfc4;
    --surface: var(--surface-bg);
    --surface-border: var(--border-color);
    --link-color: #9a5c12;
    --accent-gold: var(--bhis-gold-dim);
    --accent-rust: var(--bhis-rust-deep);
    --input-bg: #ffffff;
    --input-border: var(--border-color);
    --input-text: var(--text-primary);
    --input-placeholder: #8a857c;
    --hero-gradient: linear-gradient(135deg, #2a3548 0%, #3d5275 48%, #4a6290 100%);
    --code-bg: #ebe8e1;
}