/* ==========================================================================
   SENTRIUM DESIGN SYSTEM: BASE & FOUNDATIONS
   Monochrome High-Contrast Base with Functional Signal-Red Alert State
   Typography: Grotesk Sans Everywhere (No Serif, No Monospace)
   ========================================================================== */

:root {
  /* Surface & Base Tokens */
  --bg-primary: #F5F5F3;
  --bg-surface: #FFFFFF;
  --bg-subtle: #ECECE9;
  --bg-muted: #E2E2DE;
  
  /* Dark / SOC Dashboard Tokens */
  --bg-dark: #16181C;
  --bg-dark-surface: #1E2127;
  --bg-dark-subtle: #272B33;
  --bg-dark-elevated: #313640;

  /* Typography / Foreground Tokens */
  --text-primary: #16181C;
  --text-secondary: #4A505A;
  --text-muted: #737A87;
  --text-inverse: #F5F5F3;
  --text-inverse-muted: #9DA3AF;
  
  /* Border & Grid Tokens */
  --border-light: #DFE1DC;
  --border-strong: #16181C;
  --border-dark: #2B303A;
  --border-dark-subtle: #232730;

  /* Functional Status Tokens - Strictly Functional, Never Decorative */
  --status-blocked: #D6432E;         /* Signal-Red: Reserved strictly for blocked/critical actions */
  --status-blocked-bg: rgba(214, 67, 46, 0.09);
  --status-blocked-border: rgba(214, 67, 46, 0.35);
  
  --status-allowed: #1B5E39;         /* Restrained Forest Green: Permitted executions */
  --status-allowed-bg: rgba(27, 94, 57, 0.08);
  --status-allowed-border: rgba(27, 94, 57, 0.28);

  --status-flagged: #8A5B00;         /* Restrained Amber: Escalated / Human-in-loop */
  --status-flagged-bg: rgba(138, 91, 0, 0.08);
  --status-flagged-border: rgba(138, 91, 0, 0.28);

  /* Typography: Grotesk Sans ONLY - No serif, no monospace */
  --font-grotesk: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Geometry: Sharp 0px to 2px Max */
  --radius-none: 0px;
  --radius-sharp: 1px;
  --radius-sm: 2px;
  
  /* Layout Constraints */
  --container-max: 1240px;
  --container-wide: 1400px;
  --header-height: 64px;
}

/* Universal Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-grotesk);
}

html {
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-grotesk);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Typography Scale - Grotesk Sans Throughout */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-grotesk);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

p.lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Enforce Grotesk Sans even on pre and code */
code, pre, kbd, samp {
  font-family: var(--font-grotesk) !important;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* Tabular figures for numbers */
.num, .metric-value, .stat-number, table td {
  font-variant-numeric: tabular-nums;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Dense Grid Utilities */
.grid {
  display: grid;
  gap: 1px;
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Accessibility Utilities */
.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;
}