@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
/*
  Copyright 2026 Exabeam, Inc.
  SPDX-License-Identifier: Apache-2.0

  Praxen shared design system — single source of truth for the visual theme.

  Consumed by three surfaces:
    - index.html (the landing page) LINKS this file.
    - tests/baselines/owasp_coverage.py  INLINES this file into its <style>.
    - tests/baselines/raise_coverage.py  INLINES this file into its <style>.

  Edit the tokens / base / components here and all three update (the landing
  page live; the coverage reports on the next regeneration).

  NOTE: the @import above is kept on line 1, ahead of this comment, so that when
  the file is inlined into a report's <style> block the import is the very first
  token — robust even for non-spec CSS processors (HTML-to-PDF, strict minifiers)
  that would drop an @import preceded by a comment.

  Structure:
    1. Fonts (@import — first line, above)
    2. :root design tokens
    3. Global base + primitives (used everywhere)
    4. .report-page — chrome shared by the coverage reports only (scoped so it
       never leaks onto the landing page, which does not carry that body class)
*/

/* ---------- 2 · Design tokens ---------- */
:root {
  --bg:          #0a1020;
  --bg-2:        #0c1424;
  --panel:       rgba(255, 255, 255, 0.035);
  --panel-2:     rgba(255, 255, 255, 0.05);
  --border:      rgba(255, 255, 255, 0.09);
  --border-hi:   rgba(255, 138, 61, 0.45);
  --text:        #e9eff8;
  --muted:       #9aabc0;
  --muted-2:     #6f819a;
  --orange:      #ff7a2e;
  --orange-2:    #ff9d4d;
  --orange-deep: #e8621d;
  --accent-2:    #5b8def;   /* cool blue — second chart hue (OWASP Agentic bars) */
  --green:       #67d98b;
  --maxw:        1140px;
  --radius:      16px;
  --mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- 3 · Global base + primitives ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
h1, h2, h3, .wordmark { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -0.02em; }
a { color: var(--orange-2); text-decoration: none; }
a:hover { color: var(--orange); }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.grad {
  background: linear-gradient(100deg, var(--orange-2), var(--orange) 55%, var(--orange-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 12.5px;
  font-weight: 600; color: var(--orange-2); margin: 0 0 14px;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: 15px; border-radius: 11px;
  padding: 11px 20px; border: 1px solid transparent; transition: all .18s ease;
  font-family: inherit;
}
.btn-primary {
  color: #1a0f06;
  background: linear-gradient(100deg, var(--orange-2), var(--orange-deep));
  box-shadow: 0 6px 22px -6px rgba(255,122,46,0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(255,122,46,0.75); color: #1a0f06; }
.btn-ghost { color: var(--text); border-color: var(--border); background: var(--panel); }
.btn-ghost:hover { border-color: var(--border-hi); background: var(--panel-2); color: var(--text); }

.badge { font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); }
.badge.hot { color: var(--orange-2); border-color: var(--border-hi); background: rgba(255,122,46,0.08); }

/* ---------- 4 · Coverage-report chrome (scoped to .report-page) ---------- */
.report-page .wrap { padding: 30px 24px 60px; max-width: 1120px; }

.report-page header.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,122,46,0.10), rgba(255,255,255,0.02));
  border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 34px; margin-bottom: 28px;
}
.report-page header.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px 200px at 88% -10%, rgba(255,122,46,0.16), transparent 70%);
}
.report-page header.hero > * { position: relative; z-index: 1; }
.report-page header.hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: 700; }
.report-page header.hero .subtitle { color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.report-page .topline { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--border); }
.report-page .stat-block strong { display: block; font-family: "Space Grotesk"; font-size: 26px; font-weight: 700; color: var(--orange-2); line-height: 1.1; }
.report-page .stat-block span { font-size: 13px; color: var(--muted); }

.report-page section {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; margin-bottom: 22px;
}
.report-page section h2 {
  margin: 0 0 4px; font-size: 20px; font-weight: 600; color: var(--text);
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.report-page section h2 .scope { font-size: 13px; color: var(--muted-2); font-weight: 400; margin-left: 8px; font-family: "Inter"; letter-spacing: 0; }
.report-page section .intro { color: var(--muted); margin: 14px 0 20px; font-size: 14.5px; }

.report-page code {
  background: var(--panel-2); color: var(--orange-2);
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.82em;
}

.report-page footer.foot {
  margin-top: 30px; padding: 22px 4px 0; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted-2); text-align: center;
}
.report-page footer.foot a { color: var(--orange-2); }
.report-page footer.foot a:hover { color: var(--orange); }

/* ---------- 5 · Docs site (scoped to .docs-page) ---------- */
.docs-page { font-size: 16px; }

/* Top bar */
.docs-top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 16, 32, 0.78); border-bottom: 1px solid var(--border);
}
.docs-top-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; }
.docs-brand img { height: 30px; width: auto; display: block; }
.docs-top-links { display: flex; gap: 22px; }
.docs-top-links a { color: var(--muted); font-weight: 500; font-size: 14.5px; }
.docs-top-links a:hover { color: var(--text); }

/* Shell: sidebar + content */
.docs-shell { max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 48px; align-items: start; }
.docs-sidebar { position: sticky; top: 60px; align-self: start;
  max-height: calc(100vh - 60px); overflow-y: auto; padding: 30px 0; }
.docs-nav-title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav > ul > li > a {
  display: block; padding: 7px 12px; border-radius: 9px; font-size: 14.5px;
  color: var(--muted); font-weight: 500; border-left: 2px solid transparent;
}
.docs-nav > ul > li > a:hover { color: var(--text); background: var(--panel); }
.docs-nav > ul > li > a.active { color: var(--orange-2); background: rgba(255,122,46,0.08);
  border-left-color: var(--orange); font-weight: 600; }
.docs-subnav { list-style: none; margin: 2px 0 8px; padding: 0; }
.docs-subnav a { display: block; padding: 4px 12px 4px 22px; font-size: 13px;
  color: var(--muted-2); border-left: 2px solid var(--border); }
.docs-subnav a:hover { color: var(--text); border-left-color: var(--border-hi); }

/* Content */
.docs-main { padding: 38px 0 80px; min-width: 0; }
.docs-edit { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13.5px; }
.prose { max-width: 800px; }
.prose > :first-child { margin-top: 0; }
.prose h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1.12; margin: 0 0 18px; }
.prose h2 { font-size: 25px; font-weight: 600; margin: 46px 0 14px; padding-top: 16px;
  border-top: 1px solid var(--border); scroll-margin-top: 76px; }
.prose h3 { font-size: 19px; font-weight: 600; margin: 30px 0 10px; scroll-margin-top: 76px; }
.prose p { color: var(--muted); margin: 0 0 16px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { font-weight: 500; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { color: var(--muted); margin: 0 0 16px; padding-left: 24px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--muted-2); }
.prose blockquote { margin: 18px 0; padding: 4px 18px; border-left: 3px solid var(--orange);
  background: rgba(255,122,46,0.05); border-radius: 0 8px 8px 0; color: var(--text); }
.prose blockquote p { color: var(--text); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }
.prose code { background: var(--panel-2); color: var(--orange-2); padding: 2px 6px;
  border-radius: 5px; border: 1px solid var(--border); font-family: var(--mono); font-size: 0.85em; }
.prose pre { background: #06090f; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 18px;
  box-shadow: 0 16px 36px -20px rgba(0,0,0,0.7); }
.prose pre code { background: none; border: none; padding: 0; color: #cfe0f2;
  font-size: 13px; line-height: 1.75; }
.prose table { width: 100%; border-collapse: collapse; margin: 4px 0 22px; font-size: 14px; display: block; overflow-x: auto; }
.prose thead th { background: var(--panel-2); color: var(--text); text-align: left;
  font-weight: 600; padding: 10px 13px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.prose tbody td { padding: 10px 13px; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: top; }
.prose tbody tr:hover { background: var(--panel); }

@media (max-width: 860px) {
  .docs-shell { grid-template-columns: 1fr; gap: 0; }
  .docs-sidebar { position: static; max-height: none; overflow: visible;
    padding: 20px 0; border-bottom: 1px solid var(--border); }
  .docs-main { padding-top: 26px; }
}