/* ============================================================
   Xfence design system: tokens, fonts, base
   Shared by the marketing site, legal pages and the app.
   One accent: cobalt in light mode, neon lime (xbow.com palette) in dark mode.
   Contrast checked: every text pair below is >= 4.5:1 (WCAG AA).
   ============================================================ */

/* ---- Fonts (self-hosted, variable) ---- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/material-symbols-subset.woff2') format('woff2');
}

/* ---- Tokens: light (default) ---- */
:root {
  color-scheme: light;

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Surfaces */
  --canvas:     #F2F5F9;
  --surface:    #FBFCFE;
  --surface-2:  #E7EDF4;   /* sunken: table heads, code, inputs on cards */
  --surface-3:  #EDF1F7;   /* hover */

  /* Ink */
  --ink:        #051226;
  --ink-2:      #33445E;
  --ink-3:      #53647E;

  /* Lines */
  --line:       #D5DEEA;
  --line-2:     #AFBDD0;

  /* Accent: cobalt */
  --accent:       #2548D0;
  --accent-2:     #1B3AAE;
  --accent-tint:  #E8ECFB;
  --accent-line:  #BCC8F3;
  --accent-ink:   #FBFCFE;

  /* Semantic */
  --crit:  #B3261E;  --crit-bg:  #FBE9E7;  --crit-line:  #F1C4BF;
  --high:  #A9500F;  --high-bg:  #FBEEE1;  --high-line:  #EFCFB0;
  --med:   #82590A;  --med-bg:   #F8EFD9;  --med-line:   #E8D6A6;
  --low:   #23704A;  --low-bg:   #E3F2EA;  --low-line:   #B7DCC6;
  --ok:    #23704A;  --ok-bg:    #E3F2EA;  --ok-line:    #B7DCC6;
  --warn:  #82590A;  --warn-bg:  #F8EFD9;  --warn-line:  #E8D6A6;

  /* Elevation (tinted to the ink hue, never pure black) */
  --shadow-1: 0 1px 2px rgba(5,18,38,.07), 0 0 0 1px rgba(5,18,38,.02);
  --shadow-2: 0 4px 14px -4px rgba(5,18,38,.14), 0 1px 3px rgba(5,18,38,.07);
  --shadow-3: 0 24px 56px -16px rgba(5,18,38,.30), 0 4px 12px rgba(5,18,38,.09);
  --scrim:    rgba(5,18,38,.50);

  /* Shape: controls 8, cards 12, dialogs 16, chips 6 */
  --r-chip: 6px;
  --r-ctl:  8px;
  --r-card: 12px;
  --r-dlg:  16px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --sidebar-w: 248px;

  /* ---- Legacy aliases so existing JS inline styles keep working ---- */
  --bg-body: var(--canvas);
  --bg-surface: var(--surface);
  --bg-card: var(--surface);
  --bg-card-hover: var(--surface-3);
  --bg-input: var(--surface);
  --bg-elevated: var(--surface);
  --bg-hover: var(--surface-3);
  --bg-active: var(--accent-tint);
  --bg-secondary: var(--surface-2);
  --border: var(--line);
  --border-active: var(--line-2);
  --border-glow: var(--line-2);
  --border-subtle: var(--line);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-inverse: var(--accent-ink);
  --brand: var(--accent);
  --brand-2: var(--accent-2);
  --brand-3: var(--accent-2);
  --brand-dim: var(--accent-tint);
  --gradient: var(--accent);
  --success: var(--ok);   --success-dim: var(--ok-bg);
  --warning: var(--warn); --warning-dim: var(--warn-bg);
  --error: var(--crit);   --error-dim: var(--crit-bg);
  --danger: var(--crit);
  --info: var(--accent);  --info-dim: var(--accent-tint);
  --sev-critical: var(--crit);
  --sev-high: var(--high);
  --sev-medium: var(--med);
  --sev-low: var(--low);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --tr: all .16s var(--ease);
  --tr-fast: all .12s var(--ease);
  --tr-slow: all .24s var(--ease);
}

/* ---- Tokens: dark (only when the visitor chooses it; light is the default) ---- */
:root[data-theme="dark"] { color-scheme: dark;
  /* Palette taken from xbow.com: near-black blue-tinted ground, neon-lime signal, peach for alerts */
  --canvas:#00080B; --surface:#020F15; --surface-2:#01090D; --surface-3:#0A1A21;
  --ink:#F0F6FA; --ink-2:#AAB3B7; --ink-3:#848F95;
  --line:#1F292D; --line-2:#444D53;
  --accent:#CDFF00; --accent-2:#BBEA00; --accent-tint:rgba(205,255,0,.10); --accent-line:rgba(205,255,0,.30); --accent-ink:#00080B;
  --crit:#F28B82; --crit-bg:rgba(242,139,130,.12); --crit-line:rgba(242,139,130,.30);
  --high:#F0683F; --high-bg:rgba(240,104,63,.12);  --high-line:rgba(240,104,63,.32);
  --med:#E4BA57;  --med-bg:rgba(228,186,87,.12);   --med-line:rgba(228,186,87,.30);
  --low:#6CC495;  --low-bg:rgba(108,196,149,.12);  --low-line:rgba(108,196,149,.30);
  --ok:#6CC495;   --ok-bg:rgba(108,196,149,.12);   --ok-line:rgba(108,196,149,.30);
  --warn:#E4BA57; --warn-bg:rgba(228,186,87,.12);  --warn-line:rgba(228,186,87,.30);
  --shadow-1: 0 1px 2px rgba(0,0,0,.6);
  --shadow-2: 0 6px 18px -6px rgba(0,0,0,.75);
  --shadow-3: 0 28px 64px -16px rgba(0,0,0,.85);
  --scrim: rgba(0,4,6,.78);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
  font-size: 14px;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
p { text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
code, pre, kbd, samp { font-family: var(--font-mono); }
::selection { background: var(--accent-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* Icons: legacy `.material-icons` markup renders the self-hosted Symbols subset */
.material-icons, .ms {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
  flex-shrink: 0;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

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