/* ============================================================
   UpTime Sentinel — Executive Command theme layer
   Ported from docs/design_handoff_uptime_sentinel/lib/noc-theme.css
   + colors_and_type.css. Dark is primary; [data-mode="light"] swaps.
   All tokens are scoped under `.noc` so they never leak into the rest
   of the app. Cards = 0px radius (brand rule); buttons = 50px pills.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Roboto+Condensed:wght@300;400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

.noc {
    --font-display: 'Space Grotesk', 'JetBrains Mono', ui-monospace, monospace;
    --font-heading: 'JetBrains Mono', ui-monospace, monospace;
    --font-body: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* brand anchors */
    --magenta: #e600a0;
    --kale: #05545a;
    --ink: #20253a;

    /* cinematic accents */
    --cyan: #22d3ee;
    --violet: #8b5cf6;

    /* brand-tuned status */
    --ok: #5dd9b3;
    --warn: #f4d23c;
    --crit: #fe6e87;

    /* motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- DARK (default) ---------- */
.noc {
    --bg: #0a0e18;
    --bg-2: #0e1422;
    --panel: #121a2b;
    --card-bg: #161e30;
    --card-bg-2: #1b2540;
    --hair: rgba(255, 255, 255, 0.08);
    --hair-2: rgba(255, 255, 255, 0.14);
    --fg: #eef2fb;
    --fg-2: rgba(238, 242, 251, 0.64);
    --fg-3: rgba(238, 242, 251, 0.40);
    --glass: rgba(22, 30, 48, 0.55);
    --glass-hair: rgba(255, 255, 255, 0.10);
    --grid-line: rgba(255, 255, 255, 0.06);
    --ok-fg: var(--ok);
    --warn-fg: var(--warn);
    --crit-fg: var(--crit);
    --accent: var(--magenta);
    --accent-2: var(--violet);

    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
}

/* ---------- LIGHT ---------- */
.noc[data-mode='light'] {
    --bg: #f6f7fb;
    --bg-2: #eef1f7;
    --panel: #ffffff;
    --card-bg: #ffffff;
    --card-bg-2: #f8f9fc;
    --hair: rgba(32, 37, 58, 0.10);
    --hair-2: rgba(32, 37, 58, 0.18);
    --fg: #20253a;
    --fg-2: rgba(32, 37, 58, 0.62);
    --fg-3: rgba(32, 37, 58, 0.42);
    --glass: rgba(255, 255, 255, 0.7);
    --glass-hair: rgba(32, 37, 58, 0.08);
    --grid-line: rgba(32, 37, 58, 0.07);
    --ok-fg: #0f9d72;
    --warn-fg: #a8830a;
    --crit-fg: #e23a57;
}

.noc *,
.noc *::before,
.noc *::after {
    box-sizing: border-box;
}

.noc {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- signature magenta slash — always angled ---- */
.noc .slash {
    display: inline-block;
    width: 0.34em;
    height: 1.1em;
    background: var(--magenta);
    transform: skewX(-18deg);
    border-radius: 1px;
    flex: none;
}

/* ---- tabular figures ---- */
.noc .tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ---- eyebrow / label ---- */
.noc .eyebrow {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: var(--fg-3);
}

/* ---- card primitives (sharp corners — brand rule) ---- */
.noc .card {
    background: var(--card-bg);
    border: 1px solid var(--hair);
    border-radius: 0;
}

.noc .glass-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-hair);
    border-radius: 0;
}

/* ---- pill button (50px) ---- */
.noc .pill {
    border-radius: 50px;
}

/* ---- scrollbars ---- */
.noc ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.noc ::-webkit-scrollbar-thumb {
    background: var(--hair-2);
    border-radius: 0;
}

.noc ::-webkit-scrollbar-track {
    background: transparent;
}

/* ---- motion keyframes ---- */
@keyframes nocDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(3%, -2%, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes nocPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.82); }
}

@keyframes nocRing {
    0% { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
}

@keyframes nocDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes nocFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nocSweep {
    0% { stroke-dashoffset: 120; }
    100% { stroke-dashoffset: -120; }
}

@keyframes nocMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes nocPixelShift {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(2px, 1px, 0); }
    50% { transform: translate3d(0, 2px, 0); }
    75% { transform: translate3d(-2px, 1px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .noc *,
    .noc *::before,
    .noc *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}