/* ==========================================================================
   future.css — BUILDER console, future-facing skin: fonts, hollow glass,
   luminous accents. Loaded LAST (after login.css). Overrides only — no
   selector here is structural, no id/class/layout/size changes, nothing
   removed from builder.css/console.css/kits.css. Every colour is still
   derived from the active kit's own tokens (--accent, --glow-rgb,
   --kit-rim-rgb, --kit-page-glow-a/b) so AU and every other edition stay
   in step automatically. Designed for AU (navy, pearl, claret) first.
   ========================================================================== */

/* ---------- fonts: declare, fall back to a futuristic system stack.
   No files shipped yet — local() first, then a system font that exists
   today, so a missing woff2 produces zero console errors (the browser
   just skips straight to the next source, silently). ---------- */

@font-face {
  font-family: "Oxanium";
  src:
    local("Oxanium"),
    url("../assets/fonts/Oxanium[wght].woff2") format("woff2-variations"),
    url("../assets/fonts/Oxanium[wght].woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src:
    local("Space Grotesk"),
    url("../assets/fonts/SpaceGrotesk[wght].woff2") format("woff2-variations"),
    url("../assets/fonts/SpaceGrotesk[wght].woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src:
    local("JetBrains Mono"),
    url("../assets/fonts/JetBrainsMono[wght].woff2") format("woff2-variations"),
    url("../assets/fonts/JetBrainsMono[wght].woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --font-display: "Oxanium", "Bahnschrift", "Futura", "Avenir Next", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, monospace;

  /* Hollow-glass tokens, derived only from the active kit. */
  --fg-glass-alpha: 0.55;
  --fg-blur: 18px;
  --fg-sat: 1.4;
  --fg-rim-alpha: 0.28;
  --fg-hi-alpha: 0.08;
  --fg-glow-alpha: 0.12;
}

body,
.card-desc,
.hint,
.view-sub,
.help-body p,
.help-body ul,
.modal-card p,
.review-item {
  font-family: var(--font-body);
}

/* Headings, wordmark, big numbers get the display face + a luminous glow
   in the kit's own rim colour. */
.room-title,
.brand-word,
.tile-value,
h1, h2, h3,
.opening-wordmark {
  font-family: var(--font-display);
  text-shadow: 0 0 12px rgba(var(--kit-rim-rgb), 0.35);
}

/* Monospace stack upgrade only — builder.css already routes these
   selectors through var(--font-mono); no selector list duplicated here. */

/* ---------- fainter blueprint grid + two radial glows (already declared
   as tokens by kits.css; this layer only turns the grid opacity down and
   re-asserts the glows so they read through the glass panels below). ---------- */
html[data-edition] body {
  background-image:
    linear-gradient(var(--bw-grid-major) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--bw-grid-major) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(var(--bw-grid-minor) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--bw-grid-minor) 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(1100px 560px at 100% -10%, var(--kit-page-glow-a), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, var(--kit-page-glow-b), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
html[data-edition] {
  --bw-grid-major: rgba(var(--glow-rgb), 0.04);
  --bw-grid-minor: rgba(var(--glow-rgb), 0.02);
}

/* ---------- hollow glass: panels, cards, sidebar, top bar, table header
   rows, drawers, dialogs, six-digit code boxes ---------- */

.card,
.login-card,
.tile,
.modal-card,
.help-panel,
.sidebar,
.topbar,
.data-table th,
.audit-table-wrap,
.code-panel-body,
.code-editor-wrap,
.code-body,
.review-item,
.totp-box {
  background: rgba(var(--kit-rim-rgb), var(--fg-glass-alpha) / 1) !important;
}
/* rgba() with a var() alpha channel needs the modern syntax guarded —
   fall back for engines that choke on it by restating with color-mix,
   which every current evergreen browser supports. */
.card,
.login-card,
.tile,
.modal-card,
.help-panel,
.sidebar,
.topbar,
.data-table th,
.audit-table-wrap,
.code-panel-body,
.code-editor-wrap,
.code-body,
.review-item,
.totp-box {
  background: color-mix(in srgb, var(--panel) 55%, transparent) !important;
  -webkit-backdrop-filter: blur(var(--fg-blur)) saturate(var(--fg-sat));
  backdrop-filter: blur(var(--fg-blur)) saturate(var(--fg-sat));
  border: 1px solid rgba(var(--kit-rim-rgb), var(--fg-rim-alpha));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--fg-hi-alpha)),
    0 0 22px rgba(var(--glow-rgb), var(--fg-glow-alpha));
}

.sidebar,
.topbar {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent) !important;
  -webkit-backdrop-filter: blur(var(--fg-blur)) saturate(var(--fg-sat));
  backdrop-filter: blur(var(--fg-blur)) saturate(var(--fg-sat));
}

.modal-scrim,
.drawer-scrim {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.totp-box {
  border: 1px solid rgba(var(--kit-rim-rgb), var(--fg-rim-alpha));
}
.totp-box.is-filled {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, var(--fg-hi-alpha));
}

/* ---------- hollow primary buttons: transparent fill, accent border +
   text; gradient fill only on hover/focus. Kill switch stays solid red,
   never glass, when engaged. ---------- */

.btn-primary {
  background: transparent !important;
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--kit-accent-grad, var(--accent)) !important;
  color: var(--accent-contrast);
  border-color: transparent;
}

.kill-toggle {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.kill-toggle:hover {
  background: var(--danger-soft);
}
/* Engaged = solid red band, unmistakable, never glass. */
.kill-toggle[aria-checked="true"] {
  background: var(--danger) !important;
  color: #f2f5f3 !important;
  border-color: var(--danger);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 0 14px rgba(255, 107, 94, 0.45);
}

/* ---------- inputs: glass, hairline lights in accent on focus ---------- */

.field-input,
.field-row input,
.field-row select,
.field-row textarea,
input,
select,
textarea {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  border: 1px solid rgba(var(--kit-rim-rgb), var(--fg-rim-alpha));
}
.field-input:focus,
.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.4), 0 0 10px rgba(var(--glow-rgb), 0.25);
}

/* ---------- status dots / hairlines already draw from --accent/--glow-rgb
   via builder.css; this layer only adds the luminous glow. ---------- */

.status-pill-on::before {
  box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.9);
}
.nav-item.is-active,
.code-explorer-item.is-active,
.code-tab.is-active {
  box-shadow: inset 2px 0 0 var(--accent), 0 0 10px rgba(var(--glow-rgb), 0.12);
}

/* ---------- reduced transparency / reduced motion ---------- */

@media (prefers-reduced-transparency: reduce) {
  .card,
  .login-card,
  .tile,
  .modal-card,
  .help-panel,
  .sidebar,
  .topbar,
  .data-table th,
  .audit-table-wrap,
  .code-panel-body,
  .code-editor-wrap,
  .code-body,
  .review-item,
  .totp-box {
    background: var(--bg-elevated) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .btn-primary {
    background: var(--accent) !important;
    color: var(--accent-contrast);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0.001ms !important; }
}