/*
 * Holo-HUD: a capsuleer overlay. Dark only (single mode in the registry, so
 * the light/dark toggle hides). Deep navy, cyan accent, Oxanium for headings
 * and labels over Barlow, Share Tech Mono for figures; a faint dot grid,
 * cyan corner brackets on panels, underline-bar nav highlights and
 * cut-corner primary buttons. Fonts are loaded by themes/theme-boot.js from
 * the registry entry.
 */

html[data-fw-theme="holo"] {
    --fw-bg: #070b12;
    --fw-surface: #0b1422;
    --fw-surface-2: #0f1c2e;
    --fw-text: #d4e4ef;
    --fw-muted: #8fa9bd;
    --fw-border: #1c3248;
    --fw-border-strong: #2f5373;
    --fw-border-width: 1px;
    --fw-accent: #4fd8ff;
    --fw-on-accent: #06101a;
    --fw-accent-2: #f0c75e;
    --fw-on-accent-2: #06101a;
    --fw-link: #4fd8ff;
    --fw-link-hover: #9be8ff;
    --fw-focus: rgba(79, 216, 255, 0.35);
    --fw-positive: #5fe3a8;
    --fw-negative: #ff7a7a;
    --fw-warning: #f0c75e;
    --fw-info: #4fd8ff;
    --fw-on-status: #06101a;
    --fw-on-warning: #06101a;
    --fw-nav-bg: #080d16;
    --fw-nav-text: #b8cfdf;
    --fw-footer-bg: #060910;
    --fw-footer-text: #8aa3b6;
    --fw-input-bg: #08101b;
    --fw-code-bg: #08101b;
    --fw-row-stripe: rgba(120, 170, 210, 0.04);
    --fw-row-hover: rgba(79, 216, 255, 0.08);
    --fw-radius-sm: 2px;
    --fw-radius-md: 2px;
    --fw-radius-lg: 4px;
    --fw-radius-pill: 2px;
    --fw-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
    --fw-font-display: "Oxanium", "Barlow", sans-serif;
    --fw-font-mono: "Share Tech Mono", Menlo, Consolas, monospace;
    --fw-sec-high: #1f5a45;
    --fw-sec-low: #6b5a1e;
    --fw-sec-null: #6a2430;
    --fw-on-sec: #e6f2fa;
    --fw-status-good: #1f5a45;
    --fw-status-ok: #6b5a1e;
    --fw-status-bad: #6a2430;
    --fw-status-hover: #18304a;
    --fw-on-status-cell: #e6f2fa;
    --fw-group-row: #10233a;
    --fw-shadow-raised: 0 0 12px rgba(79, 216, 255, 0.25);
    --holo-dots: rgba(120, 170, 210, 0.10);
    --holo-soft: rgba(79, 216, 255, 0.12);
}

/* ---- Decoration ---- */

/* Dot grid */
html[data-fw-theme="holo"] body {
    background-image: radial-gradient(circle at 1px 1px, var(--holo-dots) 1px, transparent 0);
    background-size: 28px 28px;
    font-size: 15px;
}

/* Headings: Oxanium, tracked uppercase */
html[data-fw-theme="holo"] h1,
html[data-fw-theme="holo"] h2,
html[data-fw-theme="holo"] h3 {
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f1f8fc;
}
html[data-fw-theme="holo"] h1 a,
html[data-fw-theme="holo"] h2 a,
html[data-fw-theme="holo"] h3 a { color: var(--fw-accent); }
html[data-fw-theme="holo"] h4,
html[data-fw-theme="holo"] h5,
html[data-fw-theme="holo"] h6 {
    font-family: var(--fw-font-display);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Navbar: thin rule, cyan underline bar on the active/hovered item */
html[data-fw-theme="holo"] #topnavbar {
    border: 0;
    border-bottom: 1px solid var(--fw-border);
    margin-bottom: 28px;
}
html[data-fw-theme="holo"] #topnavbar .navbar-brand {
    font-family: var(--fw-font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #eaf4fb;
}
html[data-fw-theme="holo"] #topnavbar .navbar-nav > li > a {
    font-family: var(--fw-font-display);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding-left: 12px;
    padding-right: 12px;
}
html[data-fw-theme="holo"] .navbar-inverse .navbar-nav > li > a:hover,
html[data-fw-theme="holo"] .navbar-inverse .navbar-nav > li > a:focus,
html[data-fw-theme="holo"] .navbar-inverse .navbar-nav > .open > a,
html[data-fw-theme="holo"] .navbar-inverse .navbar-nav > .open > a:hover,
html[data-fw-theme="holo"] .navbar-inverse .navbar-nav > .open > a:focus,
html[data-fw-theme="holo"] .navbar-inverse .navbar-nav > .active > a {
    background-color: transparent;
    color: var(--fw-accent);
    box-shadow: inset 0 -2px 0 var(--fw-accent);
}
html[data-fw-theme="holo"] .dropdown-menu { border-color: var(--fw-border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

/* Panels: cyan corner bracket top-left, tracked uppercase headings */
html[data-fw-theme="holo"] .panel {
    border-color: var(--fw-border);
    box-shadow: none;
    background-image:
        linear-gradient(var(--fw-accent), var(--fw-accent)),
        linear-gradient(var(--fw-accent), var(--fw-accent));
    background-size: 18px 2px, 2px 18px;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
}
html[data-fw-theme="holo"] .panel > .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--fw-border);
}
html[data-fw-theme="holo"] .panel-title,
html[data-fw-theme="holo"] .panel > .panel-heading {
    font-family: var(--fw-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fw-muted);
}
html[data-fw-theme="holo"] .panel-title a { color: var(--fw-muted); }
html[data-fw-theme="holo"] .panel-title a:hover { color: var(--fw-accent); }

/* Controls: Oxanium labels; primary buttons cut-corner, the rest ghost */
html[data-fw-theme="holo"] .btn,
html[data-fw-theme="holo"] :where(button:not(.navbar-toggle, .close)),
html[data-fw-theme="holo"] :where(input[type="button"], input[type="submit"], input[type="reset"]) {
    font-family: var(--fw-font-display);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
html[data-fw-theme="holo"] .btn-primary,
html[data-fw-theme="holo"] .btn-success,
html[data-fw-theme="holo"] .btn-danger,
html[data-fw-theme="holo"] .btn-warning,
html[data-fw-theme="holo"] .btn-info {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border-radius: 0;
}
html[data-fw-theme="holo"] .btn-default,
html[data-fw-theme="holo"] :where(button:not(.btn, .navbar-toggle, .close)),
html[data-fw-theme="holo"] :where(input[type="button"]:not(.btn), input[type="submit"]:not(.btn), input[type="reset"]:not(.btn)) {
    background-color: transparent;
    color: var(--fw-text);
    border-color: var(--fw-border-strong);
}
html[data-fw-theme="holo"] .btn-default:hover,
html[data-fw-theme="holo"] .btn-default:focus,
html[data-fw-theme="holo"] :where(button:not(.btn, .navbar-toggle, .close)):hover,
html[data-fw-theme="holo"] :where(input[type="button"]:not(.btn), input[type="submit"]:not(.btn)):hover {
    background-color: var(--holo-soft);
    color: var(--fw-accent);
    border-color: var(--fw-accent);
}
html[data-fw-theme="holo"] .form-control:focus,
html[data-fw-theme="holo"] input:focus,
html[data-fw-theme="holo"] select:focus,
html[data-fw-theme="holo"] textarea:focus { border-color: var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-focus); }

/* Tables: tracked Oxanium column heads, mono figures in grids */
html[data-fw-theme="holo"] .table > thead > tr > th,
html[data-fw-theme="holo"] table.dataTable thead th,
html[data-fw-theme="holo"] .fw-grid thead th {
    font-family: var(--fw-font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fw-muted);
}
html[data-fw-theme="holo"] .table > thead > tr > th { border-bottom: 1px solid var(--fw-border-strong); }
html[data-fw-theme="holo"] .fw-grid .fw-group-row {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f1f8fc;
}
html[data-fw-theme="holo"] #priceheader { color: #f1f8fc; }

/* Footer, labels */
html[data-fw-theme="holo"] #footer { border-top: 1px solid var(--fw-border); }
html[data-fw-theme="holo"] .label,
html[data-fw-theme="holo"] .badge { font-family: var(--fw-font-display); font-weight: 600; letter-spacing: 0.5px; }