/* ARRAC.IO — Brand token system
   Light-mode is the default; html.dark overrides for dark mode.
   Loaded last on every page so it wins over per-page :root declarations.
   theme.js applies / removes the .dark class on <html>. */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

/* ── Light tokens (default) ── */
:root {
  /* Brand palette */
  --brand-navy:    #0B1220;
  --brand-crimson: #C8272D;
  --brand-ice:     #9BCFE8;
  --brand-royal:   #2563EB;
  --brand-emerald: #16845B;
  --brand-amber:   #D99122;

  /* Surfaces */
  --surface-bg:     #F5F7FB;
  --surface-card:   #FFFFFF;
  --surface-border: #E2E8F0;

  /* Text */
  --text-primary:   #0B1220;
  --text-secondary: #475569;

  /* Severity */
  --severity-critical: #B91C1C;
  --severity-high:     #C2410C;
  --severity-medium:   #A16207;
  --severity-low:      #2563EB;
  --severity-resolved: #16845B;

  /* Nav chrome */
  --nav-bg:       rgba(255,255,255,0.96);
  --nav-border:   #E2E8F0;
  --nav-polygon:  #FFFFFF;

  /* Legacy token aliases — used by per-page inline styles */
  --c-bg-page:       var(--surface-bg);
  --c-bg-surface:    var(--surface-card);
  --c-bg-card:       var(--surface-card);
  --c-bg-panel:      var(--surface-card);
  --c-bg-nav:        var(--nav-bg);
  --c-text-primary:  var(--text-primary);
  --c-text-secondary:var(--text-secondary);
  --c-text-body:     var(--text-secondary);
  --c-text-muted:    #94A3B8;
  --c-border:        var(--surface-border);
  --c-border-strong: #CBD5E1;
  --c-threat:        var(--brand-crimson);
  --c-investigate:   var(--brand-ice);
  --c-contained:     var(--brand-emerald);
  --c-contained-lit: #22c55e;
  --c-pending:       var(--brand-amber);

  /* style.css legacy vars */
  --crimson:      var(--brand-crimson);
  --crimson-dark: #8a1a1e;
  --crimson-glow: rgba(200,39,45,0.12);
  --ice:          var(--brand-ice);
  --ice-dim:      #5a8aaa;
  --ice-glow:     rgba(155,207,232,0.08);
  --amber:        var(--brand-amber);
  --white:        var(--text-primary);
  --mid:          var(--text-secondary);
  --dark:         var(--brand-navy);
  --panel:        var(--surface-card);
  --panel2:       #EFF3FB;
  --border:       var(--surface-border);
  --border-s:     #CBD5E1;
  --grid:         rgba(11,18,32,0.03);

  /* shell.css legacy vars */
  --bg:      var(--surface-bg);
  --surface: var(--surface-card);
  --text:    var(--text-secondary);
  --bright:  var(--text-primary);
  --dim:     #94A3B8;
  --sb-bg:   var(--brand-navy);
  --sb-item: var(--text-secondary);
}

/* ── Dark tokens ── */
html.dark {
  --brand-crimson: #E0474D;

  --surface-bg:     #080E19;
  --surface-card:   #151F30;
  --surface-border: #263347;

  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;

  --nav-bg:      rgba(15,26,46,0.94);
  --nav-border:  #263347;
  --nav-polygon: #151F30;

  --c-bg-page:       var(--surface-bg);
  --c-bg-surface:    var(--surface-card);
  --c-bg-card:       var(--surface-card);
  --c-bg-panel:      var(--surface-card);
  --c-bg-nav:        var(--nav-bg);
  --c-text-primary:  var(--text-primary);
  --c-text-secondary:var(--text-secondary);
  --c-text-body:     var(--text-secondary);
  --c-text-muted:    #64748B;
  --c-border:        var(--surface-border);
  --c-border-strong: #334155;

  --crimson:      var(--brand-crimson);
  --crimson-glow: rgba(224,71,77,0.12);
  --white:        var(--text-primary);
  --mid:          var(--text-secondary);
  --dark:         var(--surface-bg);
  --panel:        var(--surface-card);
  --panel2:       #1A2640;
  --border:       var(--surface-border);
  --border-s:     #334155;
  --grid:         rgba(155,207,232,0.025);

  --bg:      var(--surface-bg);
  --surface: var(--surface-card);
  --text:    var(--text-secondary);
  --bright:  var(--text-primary);
  --dim:     #64748B;
  --sb-bg:   #0B1220;
}

/* ── Base: apply tokens to page fundamentals ── */
body {
  background-color: var(--surface-bg);
  color: var(--text-secondary);
}

/* ── Typography: Space Grotesk for headlines ── */
h1, h2, h3, h4,
.headline-xl, .headline-lg, .headline-md,
.s-title, .hero-headline,
.stat-num, .footer-brand {
  font-family: 'Space Grotesk', 'Rajdhani', sans-serif;
}

/* ── Typography: JetBrains Mono for monospace / data ── */
.mono, pre, code,
.label-tag, .s-label,
.footer-copy, .footer-legal, .footer-socials a,
.stat-desc, .footer-col-title, .logo-sub,
.nav-tagline,
[class*="timestamp"], [class*="mono"], [class*="data-"] {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
}

/* ── Typography: Inter for UI / body ── */
body,
.btn-primary, .btn-ghost, .btn-primary-sm, .btn-ghost-sm,
.nav-links a, .nav-login, .footer-links a {
  font-family: 'Inter', 'Barlow Condensed', sans-serif;
}

/* ── Text colors via tokens ── */
.headline-xl, .headline-lg, .headline-md,
.s-title, .hero-headline, h1, h2, h3 {
  color: var(--text-primary);
}
.body-lg, .body-md, .s-sub { color: var(--text-secondary); }
.text-white { color: var(--text-primary); }
.accent-c   { color: var(--brand-crimson); }
.accent-i   { color: var(--brand-ice); }
.accent-a   { color: var(--brand-amber); }

/* ── Cards via tokens ── */
.card {
  background: var(--surface-card);
  border-color: var(--surface-border);
}

/* ── Dividers ── */
.divider,
hr {
  border-color: var(--surface-border);
}