/* ============================================================================
   ByteSiege Design System — Colors & Type
   Attack Surface Management + Digital Risk Protection
   ----------------------------------------------------------------------------
   Brand core:  Navy #0E2A47 · Cyan #20C4E0 · White #FFFFFF
   Fonts:       Inter (UI + display) · JetBrains Mono (data, code, telemetry)
   Load fonts via the @import below, or self-host from /fonts.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --navy:            #0E2A47;   /* primary brand — wordmark, shield body   */
  --cyan:            #20C4E0;   /* accent gem — CTAs, highlights (sparing) */
  --white:           #FFFFFF;

  /* ---- Navy scale (cool, desaturated) --------------------------------- */
  --navy-950:        #07182B;
  --navy-900:        #0E2A47;   /* = --navy */
  --navy-800:        #143655;
  --navy-700:        #1D4468;
  --navy-600:        #2A597F;
  --navy-500:        #3D6E96;

  /* ---- Cyan scale ----------------------------------------------------- */
  --cyan-700:        #0B7A8E;
  --cyan-600:        #0E8AA0;
  --cyan-500:        #15A6BF;
  --cyan-400:        #20C4E0;   /* = --cyan */
  --cyan-300:        #5BD6EC;
  --cyan-200:        #A6E9F5;
  --cyan-100:        #E0F7FB;   /* tint wash for cyan surfaces             */

  /* ---- Slate neutrals (matches brand-sheet greys) --------------------- */
  --slate-950:       #0A0F1A;
  --slate-900:       #0F172A;
  --slate-800:       #1E293B;
  --slate-700:       #334155;
  --slate-600:       #475569;
  --slate-500:       #64748B;   /* from brand sheet — muted text           */
  --slate-400:       #94A3B8;   /* from brand sheet — labels               */
  --slate-300:       #CBD5E1;
  --slate-200:       #E3E8EF;   /* from brand sheet — borders              */
  --slate-100:       #F1F5F9;
  --slate-50:        #F4F6F9;   /* from brand sheet — app canvas           */

  /* ---- Semantic surfaces ---------------------------------------------- */
  --bg-canvas:       var(--slate-50);    /* app background                 */
  --bg-surface:      var(--white);       /* cards, panels                  */
  --bg-sunken:       var(--slate-100);   /* wells, code blocks, table head */
  --bg-inverse:      var(--navy-900);    /* dark sections, footers         */
  --bg-inverse-2:    var(--navy-950);    /* deepest dark                   */

  /* ---- Semantic text -------------------------------------------------- */
  --fg-1:            var(--navy-900);    /* primary text / headings        */
  --fg-2:            var(--slate-600);   /* secondary / body               */
  --fg-3:            var(--slate-500);   /* muted / captions               */
  --fg-4:            var(--slate-400);   /* faint / placeholders, labels   */
  --fg-on-dark-1:    var(--white);
  --fg-on-dark-2:    #B7C4D6;            /* secondary text on navy         */
  --fg-on-dark-3:    #7B8DA6;            /* muted text on navy             */
  --fg-accent:       var(--cyan-600);    /* cyan text on light (legible)   */

  /* ---- Borders -------------------------------------------------------- */
  --border-1:        var(--slate-200);   /* default hairline               */
  --border-2:        var(--slate-300);   /* stronger / inputs              */
  --border-strong:   var(--slate-400);
  --border-on-dark:  rgba(255,255,255,0.10);
  --border-focus:    var(--cyan-400);

  /* ---- Severity / status (security domain) ---------------------------- */
  --critical:        #DC2626;  --critical-bg: #FEF2F2;  --critical-border: #FECACA;
  --high:            #EA580C;  --high-bg:     #FFF4ED;  --high-border:     #FED7AA;
  --medium:          #D97706;  --medium-bg:   #FFFBEB;  --medium-border:   #FDE68A;
  --low:             #2563EB;  --low-bg:      #EFF4FF;  --low-border:      #BFDBFE;
  --info:            #15A6BF;  --info-bg:     #E0F7FB;  --info-border:     #A6E9F5;
  --success:         #16A34A;  --success-bg:  #F0FDF4;  --success-border:  #BBF7D0;
  --secure:          #16A34A;  /* alias — "protected / resolved"           */

  /* ---- Radii ---------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Shadows (cool navy-tinted, not neutral black) ------------------ */
  --shadow-xs:  0 1px 2px rgba(14,42,71,0.06);
  --shadow-sm:  0 1px 3px rgba(14,42,71,0.08), 0 1px 2px rgba(14,42,71,0.04);
  --shadow-md:  0 4px 12px rgba(14,42,71,0.08), 0 2px 4px rgba(14,42,71,0.04);
  --shadow-lg:  0 12px 28px rgba(14,42,71,0.12), 0 4px 8px rgba(14,42,71,0.05);
  --shadow-xl:  0 24px 56px rgba(14,42,71,0.18);
  --ring-cyan:  0 0 0 3px rgba(32,196,224,0.30);   /* focus ring           */
  --glow-cyan:  0 0 0 1px rgba(32,196,224,0.40), 0 0 20px rgba(32,196,224,0.25);

  /* ---- Gradients (used sparingly — hero / shield washes) -------------- */
  --grad-navy:    linear-gradient(155deg, #143655 0%, #0E2A47 55%, #07182B 100%);
  --grad-cyan:    linear-gradient(135deg, #20C4E0 0%, #15A6BF 100%);
  --grad-shield:  radial-gradient(120% 120% at 50% 0%, rgba(32,196,224,0.18) 0%, rgba(32,196,224,0) 55%);

  /* ---- Type families -------------------------------------------------- */
  --font-sans: 'Inter', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type scale (semantic) ------------------------------------------ */
  --text-display:  800 56px/1.04 var(--font-sans);   /* hero               */
  --text-h1:       800 40px/1.10 var(--font-sans);
  --text-h2:       700 30px/1.16 var(--font-sans);
  --text-h3:       700 22px/1.25 var(--font-sans);
  --text-h4:       600 18px/1.35 var(--font-sans);
  --text-body-lg:  400 18px/1.6  var(--font-sans);
  --text-body:     400 15px/1.6  var(--font-sans);
  --text-body-sm:  400 13px/1.55 var(--font-sans);
  --text-label:    600 12px/1.2  var(--font-sans);   /* + letter-spacing   */
  --text-mono:     500 13px/1.5  var(--font-mono);
  --text-mono-sm:  500 12px/1.5  var(--font-mono);

  --tracking-label: 0.08em;   /* uppercase eyebrows / labels               */
  --tracking-tight: -0.02em;  /* large display headings                    */
}

/* ============================================================================
   Base element styles — opt in by adding class "bs" to a wrapper, or apply
   globally. Headings use Inter; body 15px; data uses mono.
   ============================================================================ */

.bs, .bs * { box-sizing: border-box; }

.bs {
  font: var(--text-body);
  color: var(--fg-2);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bs h1 { font: var(--text-h1); color: var(--fg-1); letter-spacing: var(--tracking-tight); margin: 0 0 .5em; }
.bs h2 { font: var(--text-h2); color: var(--fg-1); letter-spacing: -0.01em; margin: 0 0 .5em; }
.bs h3 { font: var(--text-h3); color: var(--fg-1); margin: 0 0 .4em; }
.bs h4 { font: var(--text-h4); color: var(--fg-1); margin: 0 0 .4em; }
.bs p  { margin: 0 0 1em; text-wrap: pretty; }

.bs .display   { font: var(--text-display); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.bs .eyebrow   { font: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-accent); }
.bs .lead      { font: var(--text-body-lg); color: var(--fg-2); }
.bs .muted     { color: var(--fg-3); }
.bs .mono      { font: var(--text-mono); }
.bs code, .bs .code {
  font: var(--text-mono-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  color: var(--navy-800);
}

.bs a { color: var(--fg-accent); text-decoration: none; }
.bs a:hover { text-decoration: underline; }