/* HTA Cloud operations console - tokens, reset, type.
   Dark-only by design: this is a NOC console, not a marketing page. */

:root {
    color-scheme: dark;

    /* planes (blue-graphite, darkest = page) */
    --bg: #07090d;
    --rail: #090c11;
    --surface-1: #10151c;      /* panels + chart surface (validated against) */
    --surface-2: #141a23;      /* raised: inputs, table heads */
    --surface-3: #1a2230;      /* hover */
    --surface-4: #222b3a;

    /* hairlines */
    --line: #1c2430;
    --line-2: #273141;
    --line-3: #354155;

    /* ink - text never wears a data colour */
    --ink: #e6ebf2;
    --ink-2: #a2adbc;
    --ink-3: #6c7889;
    --ink-4: #4a5566;

    /* the one signal accent: radio amber. Chrome only (wordmark, active
       nav, focus) - never a data mark, never a status. */
    --accent: #f2a93b;
    --accent-2: #ffc46b;
    --accent-wash: rgba(242, 169, 59, 0.10);
    --accent-line: rgba(242, 169, 59, 0.42);

    /* status - reserved for state; always shipped with a label */
    --good: #22b061;
    --good-wash: rgba(34, 176, 97, 0.12);
    --warn: #f0c419;
    --warn-wash: rgba(240, 196, 25, 0.12);
    --high: #ef7a3f;
    --high-wash: rgba(239, 122, 63, 0.13);
    --crit: #e5484d;
    --crit-wash: rgba(229, 72, 77, 0.13);
    --info: #7d93b5;
    --info-wash: rgba(125, 147, 181, 0.12);
    --idle: #58647a;

    /* data series (validated: dark, surface #10151c, all-pairs pass) */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-1-wash: rgba(57, 135, 229, 0.10);

    --grid: #1b222c;
    --axis: #2e3847;

    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --r-1: 3px;
    --r-2: 5px;
    --r-3: 8px;

    --rail-w: 228px;
    --top-h: 52px;
    --shadow-pop: 0 18px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line-2);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-2); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-2); }
.hide { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
::selection { background: rgba(242, 169, 59, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* boot splash (before JS renders) */
.boot { display: grid; place-items: center; min-height: 100vh; }
.boot-mark { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; }
.boot-text { animation: blink 1.4s steps(2, jump-none) infinite; }
.noscript { padding: 40px; text-align: center; color: var(--ink-2); }
@keyframes blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}