/* ============================================================================
   STORM OS · BASE
   Self-hosted brand faces (no third-party font CDN, per Brand Kit v1.1 §06),
   reset, type ramp, and the accessibility floor: visible focus everywhere,
   44px touch targets, reduced-motion respected.
   ========================================================================== */

@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/inter-tight-400-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../assets/fonts/inter-100-900.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/plex-mono-600.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--tk-font-body);font-size:var(--tk-fs-body);line-height:1.55;
  color:var(--sos-color-text);background:var(--tk-surface);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
img,svg{display:block;max-width:100%}
/* Every icon() carries .ic and is 18px unless a context rule says otherwise.
   Without this an inline <svg> with no viewBox falls back to 300x150. */
.ic{width:18px;height:18px;flex:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--tk-primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
ul,ol{list-style:none}
strong,b{font-weight:600;color:var(--sos-color-anchor)}

/* The headline voice · Inter Tight, set tight. Grown-up, not costume. */
h1,h2,h3{font-family:var(--tk-font-head);color:var(--sos-color-anchor);line-height:1.18;
  letter-spacing:var(--sos-track-display);font-weight:700}
h1{font-size:26px}
h2{font-size:17px}
h3{font-size:15.5px}
.disp{font-family:var(--sos-font-display);font-weight:700;color:var(--sos-color-anchor);
  letter-spacing:var(--sos-track-display)}
.wm{font-family:var(--sos-font-display);font-weight:700;font-size:19px;
  letter-spacing:-.028em;line-height:1;white-space:nowrap}
.wm .s{color:var(--sos-color-anchor)}
.wm .o{color:var(--sos-color-primary)}
.wm.on-dark .s{color:#fff}
.wm.on-dark .o{color:var(--sos-accent-500)}

.mono{font-family:var(--sos-font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--sos-color-text-muted)}
.small{font-size:13.5px;color:var(--sos-color-text-muted);line-height:1.55}
.kicker{font-family:var(--sos-font-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sos-color-text-muted)}

/* Focus · Bolt Cyan ring at 2px with a 2px offset. Every focusable element, no exceptions. */
:focus{outline:none}
:focus-visible{outline:var(--tk-focus-ring);outline-offset:var(--sos-focus-offset);border-radius:var(--r-xs)}
.btn:focus-visible,.inp:focus-visible,.chip-filter:focus-visible{border-radius:var(--tk-radius)}

::selection{background:var(--sos-color-fill-soft);color:var(--sos-color-anchor)}
.app-scope ::selection{background:var(--tk-primary-soft)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:fixed;top:-48px;left:12px;z-index:200;background:var(--sos-color-anchor);
  color:#fff;padding:10px 16px;border-radius:var(--r-6);font-weight:600;transition:top var(--t-fast) var(--ease-out)}
.skip-link:focus{top:12px}

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