/* Nightwatch design tokens — the single source of visual truth.
   Language of a security control room at 3am: deep blue-black night,
   sodium-amber standby lights, signal-blue live indicators. Amber = armed
   (like the standby LED on real security panels), red = alarm,
   green appears only when something is resolved. */
@import url('/static/fonts/fonts.css');

:root {
  /* night optics — deep midnight with a faint blue undertone */
  --nw-ink: #080A0F;            /* 3am sky — deeper, richer black-blue */
  --nw-ink-2: #0C0F17;
  --nw-canvas: var(--nw-ink);
  --nw-surface: #11151F;        /* elevated glass */
  --nw-surface-2: #191F2D;
  --nw-line: rgba(154, 174, 208, 0.14);
  --nw-line-strong: rgba(154, 174, 208, 0.30);
  --nw-text: #EEF2FA;
  --nw-text-dim: #93A3BE;

  /* state language */
  --nw-amber: #FFA828;          /* armed / standing watch */
  --nw-amber-soft: #FFC875;
  --nw-amber-deep: #7A4A00;
  --nw-alarm: #FF5468;          /* incident — a touch more saturated */
  --nw-alarm-deep: #5C1420;
  --nw-signal: #5AA6FF;         /* live / links / info */
  --nw-signal-deep: #12304F;
  --nw-sage: #6FE0A6;           /* resolved, and nothing else */
  --nw-violet: #A78BFA;         /* experimental / review-only, used sparingly */
  --nw-violet-deep: #2A2350;

  /* depth: ambient glows + glass — restrained for a serious, control-room calm */
  --nw-glow-amber: 0 0 28px rgba(255, 168, 40, 0.15);
  --nw-glow-alarm: 0 0 30px rgba(255, 84, 104, 0.20);
  --nw-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* legacy aliases (guide + older styles) */
  --nw-aurora: var(--nw-signal);
  --nw-aurora-deep: var(--nw-signal-deep);
  --nw-danger: var(--nw-alarm);

  /* type */
  --nw-font-display: 'Archivo', 'Arial Black', sans-serif;
  --nw-font-ui: system-ui, 'Segoe UI', sans-serif;
  --nw-font-mono: 'IBM Plex Mono', Consolas, monospace;

  --nw-radius: 14px;
  --nw-radius-sm: 8px;
  --nw-gap: 14px;
  --nw-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* spacing scale — one rhythm across every page (use these, not ad-hoc px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* type scale — ONE ladder; components snap to these, never ad-hoc rem values.
     nano(badges) · micro(eyebrows) · cap(sub-text/chips) · body-sm(dense list/form)
     · body · h3(section title) · h2(page title) · h1(hero). */
  --fs-nano: .62rem; --fs-micro: .70rem; --fs-cap: .80rem; --fs-body-sm: .88rem;
  --fs-body: .94rem; --fs-h3: 1.05rem; --fs-h2: 1.35rem; --fs-h1: clamp(1.7rem, 4vw, 2.4rem);
  /* semantic aliases (owner-console vocabulary) */
  --fs-caption: var(--fs-cap); --fs-section-title: var(--fs-h3); --fs-page-title: var(--fs-h2);
  --fw-strong: 600;

  /* motion — purposeful, state-communicating; disabled under reduced-motion */
  --mo-fast: 120ms; --mo-base: 200ms; --mo-slow: 360ms;
  --mo-ease: cubic-bezier(.2, .7, .2, 1);
  --mo-ease-out: cubic-bezier(0, 0, .2, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  color: var(--nw-text);
  font-family: var(--nw-font-ui); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* ambient command-room depth — faint amber up top-left, cool signal top-right */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255, 168, 40, 0.06), transparent 58%),
    radial-gradient(900px 520px at 100% -6%, rgba(90, 166, 255, 0.05), transparent 55%),
    var(--nw-ink);
  background-attachment: fixed;
}
h1, h2, h3 {
  font-family: var(--nw-font-display); font-weight: 900;
  letter-spacing: -0.01em; margin: 0;
}
button {
  font: inherit; font-weight: 600; color: var(--nw-text);
  background: var(--nw-surface-2); border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius-sm); padding: 9px 16px; cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
}
button:hover { border-color: var(--nw-line-strong); background: #1D2839; }
button:active { transform: scale(.97); }
button.nw-primary {
  background: linear-gradient(180deg, var(--nw-amber-soft), var(--nw-amber));
  color: #241300; border: none; font-weight: 700;
}
button.nw-primary:hover { background: var(--nw-amber-soft); box-shadow: var(--nw-glow-amber); }
button.nw-danger { background: transparent; border-color: var(--nw-alarm); color: var(--nw-alarm); }
/* One control system: text fields, selects and textareas share height, padding,
   radius and border; checks/radios/range share the amber accent; one disabled
   state. --control-h is the single height every control lines up to. */
:root { --control-h: 40px; }
input, select, textarea {
  font: inherit; color: var(--nw-text); background: var(--nw-ink);
  border: 1px solid var(--nw-line); border-radius: var(--nw-radius-sm);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea { min-height: var(--control-h); padding: 9px 12px; }
textarea { min-height: calc(var(--control-h) * 2); padding: var(--sp-2) 12px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--nw-amber); }
input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: .5; cursor: not-allowed;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--nw-signal); outline-offset: 1px;
}
/* Custom, evenly-inset dropdown chevron. The native arrow sat jammed against the
   border and clashed with the dark theme; two CSS gradients draw the caret with
   no external asset (CSP img-src is 'self' only, so no data: URI), and the extra
   right padding reserves clean space between the caret and the border. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nw-text-dim) 50%),
    linear-gradient(135deg, var(--nw-text-dim) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat, no-repeat;
}
select:hover { background-image:
    linear-gradient(45deg, transparent 50%, var(--nw-text) 50%),
    linear-gradient(135deg, var(--nw-text) 50%, transparent 50%); }
[dir="rtl"] select {
  padding-right: 12px; padding-left: 34px;
  background-position: 17px center, 12px center;
}
.nw-mono { font-family: var(--nw-font-mono); font-size: .82em; color: var(--nw-text-dim); }
.nw-card {
  background: var(--nw-surface); border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius); padding: 18px; box-shadow: var(--nw-hairline);
}
.nw-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--nw-surface-2); border: 1px solid var(--nw-alarm);
  color: var(--nw-text); border-radius: var(--nw-radius-sm);
  padding: 10px 18px; z-index: 90; box-shadow: var(--nw-shadow);
}

/* The hidden attribute must always win, even over explicit display rules. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}