/* ═══════════════════════════════════════════════════════════════════════════
   ETX AURORA — the shared visual language for ETX Works websites.

   Structure follows the Aurora pattern: Bootstrap 5.3 with data-bs-theme, one
   semantic token block redefined for dark, and no component rule that names a
   colour. Drop this file and etx-aurora.js into any ETX site and it matches.

   THE ONE RULE: components read tokens, never colours. Ink (text) goes LIGHTER
   in dark mode; ground (a background carrying white text) stays DARK. They are
   separate tokens even where they share a value in light mode.

   Site-specific components live in their own sheet loaded after this one.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand. Fixed in both themes: identity, mirrored into email and PDF. */
    --etx-navy: #0f2742;
    --etx-steel: #1d5fa8;
    --etx-teal: #0f766e;
    --etx-teal-bright: #14b8a6;
    --etx-copper: #b45309;

    --etx-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --etx-font-heading: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
    --etx-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Surfaces */
    --etx-page-ground: #f4f6f9;
    --etx-surface: #ffffff;
    --etx-surface-muted: #f1f4f8;
    --etx-surface-sunk: #e5eaf0;
    --etx-line: #d6dde6;

    /* Ink */
    --etx-ink: #18212d;
    --etx-ink-muted: #556275;
    --etx-ink-faint: #97a1ae;   /* below AA on purpose: placeholders only */
    --etx-heading: #0f2742;

    /* Grounds that carry white text */
    --etx-brand-surface: #0f2742;
    --etx-brand-surface-hover: #0a1b30;
    --etx-on-brand-surface: #ffffff;

    /* Accent: ink and ground are separate tokens */
    --etx-accent: #0f766e;
    --etx-accent-surface: #0f766e;
    --etx-accent-surface-hover: #0b5e58;
    --etx-on-accent-surface: #ffffff;
    --etx-accent-tint: #e7f5f3;

    --etx-link: #1d5fa8;
    --etx-link-hover: #0f2742;
    --etx-focus-ring: #2b7de9;

    /* States. Never carried by colour alone: always a word, usually an icon. */
    --etx-ok: #2f7d36;
    --etx-attention: #b45309;
    --etx-blocked: #b3261e;
    --etx-notice: #0e7490;

    --etx-shadow: 0 1px 2px rgba(15, 39, 66, .06), 0 8px 24px rgba(15, 39, 66, .07);
    --etx-shadow-lg: 0 2px 4px rgba(15, 39, 66, .05), 0 24px 48px rgba(15, 39, 66, .12);
    --etx-radius: .75rem;

    /* So stock Bootstrap components pick the brand up without being restyled. */
    --bs-body-font-family: var(--etx-font-body);
    --bs-body-bg: var(--etx-page-ground);
    --bs-body-color: var(--etx-ink);
    --bs-emphasis-color: var(--etx-heading);
    --bs-heading-color: var(--etx-heading);
    --bs-secondary-color: var(--etx-ink-muted);
    --bs-tertiary-bg: var(--etx-surface);
    --bs-border-color: var(--etx-line);
    --bs-primary: #0f2742;
    --bs-primary-rgb: 15, 39, 66;
    --bs-link-color: var(--etx-link);
    --bs-link-color-rgb: 29, 95, 168;
    --bs-link-hover-color: var(--etx-link-hover);
    --bs-link-hover-color-rgb: 15, 39, 66;
    --bs-card-bg: var(--etx-surface);
}

[data-bs-theme="dark"] {
    --etx-page-ground: #0b0f14;
    --etx-surface: #121820;
    --etx-surface-muted: #18202a;
    --etx-surface-sunk: #202a36;
    --etx-line: #2c3846;

    --etx-ink: #e3e8ef;
    --etx-ink-muted: #9aa6b5;
    --etx-ink-faint: #667385;
    --etx-heading: #a9d6f5;

    --etx-brand-surface: #17426e;
    --etx-brand-surface-hover: #1d5188;
    --etx-on-brand-surface: #ffffff;

    --etx-accent: #2dd4bf;
    --etx-accent-surface: #14b8a6;
    --etx-accent-surface-hover: #2dd4bf;
    --etx-on-accent-surface: #042f2b;   /* dark text: white does not clear AA on bright teal */
    --etx-accent-tint: #0e2a2a;

    --etx-link: #7cc4ff;
    --etx-link-hover: #a9d6f5;
    --etx-focus-ring: #4fb3ff;

    --etx-ok: #4ade80;          /* lifted: the light green fails AA on near-black */
    --etx-attention: #f0b65c;
    --etx-blocked: #f87171;
    --etx-notice: #22d3ee;

    --etx-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 .5rem 1.5rem rgba(0, 0, 0, .45);
    --etx-shadow-lg: 0 0 0 1px rgba(255, 255, 255, .05), 0 1.5rem 3rem rgba(0, 0, 0, .55);

    --bs-body-bg: var(--etx-page-ground);
    --bs-body-color: var(--etx-ink);
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: var(--etx-heading);
    --bs-secondary-color: var(--etx-ink-muted);
    --bs-tertiary-bg: var(--etx-surface);
    --bs-border-color: var(--etx-line);
    --bs-primary: #17426e;
    --bs-primary-rgb: 23, 66, 110;
    --bs-link-color: var(--etx-link);
    --bs-link-color-rgb: 124, 196, 255;
    --bs-link-hover-color: var(--etx-link-hover);
    --bs-link-hover-color-rgb: 169, 214, 245;
    --bs-card-bg: var(--etx-surface);
}

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--etx-page-ground);
    color: var(--etx-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--etx-font-heading);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--etx-heading);
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Bootstrap 5.3 buttons read --bs-btn-* variables, so the brand is applied by
   pointing those at tokens rather than overriding background-color. */
.btn { font-weight: 600; border-radius: .6rem; }

.btn-primary {
    --bs-btn-bg: var(--etx-brand-surface);
    --bs-btn-border-color: var(--etx-brand-surface);
    --bs-btn-color: var(--etx-on-brand-surface);
    --bs-btn-hover-bg: var(--etx-brand-surface-hover);
    --bs-btn-hover-border-color: var(--etx-brand-surface-hover);
    --bs-btn-hover-color: var(--etx-on-brand-surface);
    --bs-btn-active-bg: var(--etx-brand-surface-hover);
    --bs-btn-active-border-color: var(--etx-brand-surface-hover);
    --bs-btn-active-color: var(--etx-on-brand-surface);
    --bs-btn-disabled-bg: var(--etx-brand-surface);
    --bs-btn-disabled-border-color: var(--etx-brand-surface);
}

.btn-accent {
    --bs-btn-bg: var(--etx-accent-surface);
    --bs-btn-border-color: var(--etx-accent-surface);
    --bs-btn-color: var(--etx-on-accent-surface);
    --bs-btn-hover-bg: var(--etx-accent-surface-hover);
    --bs-btn-hover-border-color: var(--etx-accent-surface-hover);
    --bs-btn-hover-color: var(--etx-on-accent-surface);
    --bs-btn-active-bg: var(--etx-accent-surface-hover);
    --bs-btn-active-border-color: var(--etx-accent-surface-hover);
    --bs-btn-active-color: var(--etx-on-accent-surface);
}

.btn-outline-primary {
    --bs-btn-color: var(--etx-heading);
    --bs-btn-border-color: var(--etx-line);
    --bs-btn-bg: var(--etx-surface);
    --bs-btn-hover-bg: var(--etx-surface-muted);
    --bs-btn-hover-color: var(--etx-heading);
    --bs-btn-hover-border-color: var(--etx-heading);
    --bs-btn-active-bg: var(--etx-surface-sunk);
    --bs-btn-active-color: var(--etx-heading);
    --bs-btn-active-border-color: var(--etx-heading);
}

/* ── Focus rings ─────────────────────────────────────────────────────────── */
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link:focus-visible {
    box-shadow: 0 0 0 .1rem var(--etx-page-ground), 0 0 0 .25rem var(--etx-focus-ring);
    border-color: var(--etx-focus-ring);
    outline: 0;
}

.form-control, .form-select {
    background-color: var(--etx-surface);
    border-color: var(--etx-line);
    color: var(--etx-ink);
}
.form-control::placeholder { color: var(--etx-ink-faint); }

.card {
    background-color: var(--etx-surface);
    border-color: var(--etx-line);
    border-radius: var(--etx-radius);
}

/* ── Brand mark ─────────────────────────────────────────────────────────────
   Inline SVG drawn in currentColor plus the accent token, so it follows the
   theme with no filter and no second asset. */
.brand-mark { width: 36px; height: 36px; color: var(--etx-heading); flex: none; }
.brand-mark .mark-accent { fill: var(--etx-accent); }
.brand-mark .mark-line { stroke: currentColor; }
.brand-mark .mark-node { fill: currentColor; }

/* ── Theme toggle: shows the mode a click switches TO ───────────────────── */
.theme-icon { width: 1rem; height: 1rem; fill: currentColor; }
.theme-icon-sun { display: none; }
[data-bs-theme="dark"] .theme-icon-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-icon-moon { display: none; }

/* ── Notices and status panels ──────────────────────────────────────────── */
.etx-note {
    border: 1px solid color-mix(in srgb, var(--etx-notice) 30%, transparent);
    border-left: 6px solid var(--etx-notice);
    background-color: color-mix(in srgb, var(--etx-notice) 8%, var(--etx-surface));
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    line-height: 1.6;
}
.etx-note-title { font-weight: 700; color: var(--etx-notice); margin-bottom: .25rem; }

.etx-panel {
    border: 1px solid var(--etx-line);
    border-left: 6px solid var(--etx-ink-muted);
    background-color: var(--etx-surface);
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--etx-shadow);
}
.etx-panel.state-ok { border-left-color: var(--etx-ok); }
.etx-panel.state-attention { border-left-color: var(--etx-attention); }
.etx-panel.state-blocked { border-left-color: var(--etx-blocked); }

.state-ok { color: var(--etx-ok); }
.state-attention { color: var(--etx-attention); }
.state-blocked { color: var(--etx-blocked); }

/* ── Reference tables ───────────────────────────────────────────────────── */
.table { --bs-table-bg: var(--etx-surface); --bs-table-color: var(--etx-ink); --bs-table-border-color: var(--etx-line); }
.table-records { font-size: .925rem; }
.table-records th {
    white-space: nowrap;
    color: var(--etx-ink-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .05em;
}

.copy-field { font-family: var(--etx-font-mono); font-size: .88rem; word-break: break-all; }

.section-heading { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.section-note { color: var(--etx-ink-muted); max-width: 80ch; }

.text-muted-ink { color: var(--etx-ink-muted) !important; }