/* WatchKeeper design tokens, copied from the design system handoff (tokens/*.css). Edit there, then re-copy. */
/* Self-hosted webfonts (latin subset) — from Google Fonts, SIL OFL */
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-400i.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2')}
@font-face{font-family:'Zen Dots';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/zen-dots-400.woff2') format('woff2')}
/* Katakana + a few kanji only (監視者警告脅威正常) — for brand accents, not running Japanese text */
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/noto-sans-jp-900-katakana.woff2') format('woff2')}

/* WatchKeeper colour tokens — palette "Red Eye" */
:root{
/* base: void (blacks) */
--wk-void-950:#0A0909;--wk-void-900:#110E0E;--wk-void-850:#161313;--wk-void-800:#1E1A19;--wk-void-700:#282322;--wk-void-600:#2E2826;--wk-void-500:#463D3A;
/* base: bone (warm neutrals) */
--wk-bone-50:#F2EDE4;--wk-bone-100:#E6DFD3;--wk-bone-200:#CFC6B8;--wk-bone-400:#B0A69A;--wk-ash-500:#8F8781;--wk-ash-700:#5E5650;
/* base: overlord red */
--wk-red-100:#FFD6DC;--wk-red-300:#FF8A98;--wk-red-400:#FF5468;--wk-red-500:#FF1F3D;--wk-red-600:#E0001F;--wk-red-700:#A30017;--wk-red-900:#3A0810;--wk-red-950:#22060A;
/* base: status */
--wk-green-400:#7CFFB2;--wk-green-700:#0A7A3E;--wk-green-900:#0E2A1B;
--wk-amber-400:#FFB547;--wk-amber-700:#8A5200;--wk-amber-900:#2E1E07;

/* semantic — dark (default) */
--bg-page:var(--wk-void-950);--bg-surface:var(--wk-void-850);--bg-raised:var(--wk-void-800);--bg-inset:var(--wk-void-900);--bg-hover:var(--wk-void-700);--bg-inverse:var(--wk-bone-50);
--fg-1:var(--wk-bone-50);--fg-2:var(--wk-bone-200);--fg-3:var(--wk-ash-500);--fg-disabled:var(--wk-ash-700);--fg-inverse:var(--wk-void-950);
--border:var(--wk-void-600);--border-strong:var(--wk-void-500);--border-focus:var(--wk-red-500);
--accent:var(--wk-red-500);--accent-hover:var(--wk-red-400);--accent-press:var(--wk-red-600);--accent-fg:var(--wk-void-950);--accent-text:var(--wk-red-500);--accent-tint:var(--wk-red-950);
--status-threat:var(--wk-red-500);--status-threat-tint:var(--wk-red-950);
--status-watch:var(--wk-amber-400);--status-watch-tint:var(--wk-amber-900);
--status-nominal:var(--wk-green-400);--status-nominal-tint:var(--wk-green-900);
--status-intel:var(--wk-bone-50);--status-intel-tint:var(--wk-void-800);
--scrim:rgba(10,9,9,.78);
}
/* semantic — light (print, email, docs) */
[data-theme="light"]{
--bg-page:var(--wk-bone-50);--bg-surface:#FBF8F2;--bg-raised:#FFFFFF;--bg-inset:var(--wk-bone-100);--bg-hover:var(--wk-bone-100);--bg-inverse:var(--wk-void-950);
--fg-1:var(--wk-void-950);--fg-2:#3A3431;--fg-3:var(--wk-ash-700);--fg-disabled:var(--wk-bone-400);--fg-inverse:var(--wk-bone-50);
--border:var(--wk-bone-200);--border-strong:var(--wk-bone-400);
--accent:var(--wk-red-600);--accent-hover:var(--wk-red-500);--accent-press:var(--wk-red-700);--accent-fg:#FFFFFF;--accent-text:var(--wk-red-600);--accent-tint:var(--wk-red-100);
--status-threat:var(--wk-red-600);--status-threat-tint:var(--wk-red-100);
--status-watch:var(--wk-amber-700);--status-watch-tint:#FBEBD0;
--status-nominal:var(--wk-green-700);--status-nominal-tint:#D9F2E3;
--status-intel:var(--wk-void-950);--status-intel-tint:var(--wk-bone-100);
--scrim:rgba(10,9,9,.55);
}

/* WatchKeeper typography tokens */
:root{
--font-display:'Zen Dots','Arial Black',sans-serif;
--font-jp:'Noto Sans JP',sans-serif;
--font-body:'IBM Plex Sans',system-ui,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--text-display-xl:88px;--text-display-l:64px;--text-h1:44px;--text-h2:32px;--text-h3:24px;--text-h4:22px;
--text-body-l:18px;--text-body:16px;--text-body-s:14px;--text-caption:12px;--text-micro:11px;
--leading-display:1;--leading-heading:1.1;--leading-body:1.55;--leading-tight:1.25;
--tracking-display:0;--tracking-jp:.3em;--tracking-heading:0;--tracking-label:.14em;--tracking-wordmark:.02em;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:900;
/* semantic */
--type-display:var(--weight-regular) var(--text-display-l)/var(--leading-display) var(--font-display);
--type-h1:var(--weight-regular) var(--text-h1)/var(--leading-heading) var(--font-display);
--type-h2:var(--weight-regular) var(--text-h2)/var(--leading-heading) var(--font-display);
--type-h3:var(--weight-regular) var(--text-h3)/var(--leading-heading) var(--font-display);
--type-h4:var(--weight-semibold) var(--text-h4)/var(--leading-tight) var(--font-body);
--type-body:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-body);
--type-body-s:var(--weight-regular) var(--text-body-s)/var(--leading-body) var(--font-body);
--type-label:var(--weight-medium) var(--text-micro)/1 var(--font-mono);
--type-jp:var(--weight-black) var(--text-caption)/1 var(--font-jp);
--type-data:var(--weight-regular) var(--text-body-s)/1.4 var(--font-mono);
}

/* WatchKeeper spacing & layout */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:96px;--space-13:128px;
--control-sm:32px;--control-md:40px;--control-lg:48px;
--container-max:1280px;--container-pad:32px;--grid-gutter:24px;--sidebar-w:248px;--topbar-h:56px;
}

/* WatchKeeper radii, borders, elevation, motion */
:root{
--radius-0:0;--radius-1:2px;--radius-round:999px;
--border-w:1px;--border-w-heavy:2px;--bracket-w:2px;--bracket-len:12px;
--shadow-none:none;
--shadow-overlay:0 24px 64px rgba(0,0,0,.6),0 0 0 1px var(--border);
--glow-red:0 0 0 1px var(--wk-red-500),0 0 24px rgba(255,31,61,.45);
--glow-red-soft:0 0 18px rgba(255,31,61,.35);
--glow-nominal:0 0 12px rgba(124,255,178,.5);
--focus-ring:0 0 0 2px var(--bg-page),0 0 0 4px var(--wk-red-500);
--scanlines:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px); /* @kind other */

--grid-lines:linear-gradient(var(--border) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--border) 1px,transparent 1px) 0 0/48px 48px; /* @kind other */

--ease-snap:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */

--dur-instant:80ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:400ms; /* @kind other */
--dur-scan:3600ms; /* @kind other */

--z-sticky:10; /* @kind other */
--z-dropdown:30; /* @kind other */
--z-overlay:50; /* @kind other */
--z-toast:70; /* @kind other */
--z-tooltip:80; /* @kind other */

}
@keyframes wk-blink{50%{opacity:0}}
@keyframes wk-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wk-scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes wk-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* WatchKeeper element defaults */
html{background:var(--bg-page);color:var(--fg-1)}
body{margin:0;font:var(--type-body);color:var(--fg-1);background:var(--bg-page);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
::selection{background:var(--wk-red-500);color:var(--wk-void-950)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance}h4{font:var(--type-h4);margin:0}
p{text-wrap:pretty}
code,kbd,samp{font-family:var(--font-mono)}