/* =============================================================================
   KruxOS Design System — Colors & Type
   Dark-first. Monospace-forward. No blue anywhere.
   ============================================================================= */

/* -------- Fonts -------- */
@font-face {
  font-family: 'Radiate Sans';
  src: url('fonts/radiate-sans-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono + Inter loaded from Google Fonts in each HTML file:
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> */

:root {
  /* -------- Core palette -------- */
  --krx-green:          #1D9E75; /* primary — brand green */
  --krx-green-light:    #5DCAA5; /* accent — highlights, active states */
  --krx-green-10:       rgba(29, 158, 117, 0.10);
  --krx-green-20:       rgba(29, 158, 117, 0.20);
  --krx-green-40:       rgba(29, 158, 117, 0.40);

  --krx-bg:             #08080f; /* page background — near-black with blue-black undertone */
  --krx-surface:        #10101c; /* card / panel surfaces */
  --krx-surface-raised: #15152a; /* modals, popovers */
  --krx-border:         #1a1a2e; /* default border */
  --krx-border-subtle:  #2d2d44; /* muted / subtle dividers */

  --krx-amber:          #EF9F27; /* approval / warning / pending */
  --krx-amber-10:       rgba(239, 159, 39, 0.10);
  --krx-amber-20:       rgba(239, 159, 39, 0.20);

  --krx-red:            #E24B4A; /* blocked / error / destructive */
  --krx-red-10:         rgba(226, 75, 74, 0.10);
  --krx-red-20:         rgba(226, 75, 74, 0.20);

  /* -------- Semantic foreground -------- */
  --fg-1:   #EDEDF2;  /* primary text */
  --fg-2:   #C0C0CC;  /* secondary / body */
  --fg-3:   #8A8A9E;  /* tertiary / muted */
  --fg-4:   #5A5A70;  /* disabled / placeholders */
  --fg-mono-key: var(--krx-green-light); /* mono accents (capabilities, routes) */

  /* -------- Status / tier semantic aliases -------- */
  --status-healthy:     var(--krx-green);
  --status-degraded:    var(--krx-amber);
  --status-critical:    var(--krx-red);
  --status-connected:   var(--krx-green);
  --status-disconnected:#5A5A70;

  --tier-autonomous:    var(--krx-green);      /* runs without asking */
  --tier-notify:        var(--krx-green-light);/* runs, tells you */
  --tier-approval:      var(--krx-amber);      /* waits for you */
  --tier-blocked:       var(--krx-red);        /* never runs */

  --primary:            var(--krx-green);
  --primary-fg:         #ffffff;
  --destructive:        var(--krx-red);

  /* -------- Type -------- */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Radiate Sans', var(--font-sans);   /* wordmark only */

  /* -------- Spacing / radius / shadow -------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px var(--krx-green-40), 0 0 12px var(--krx-green-20);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-std: 180ms;
  --dur-slow: 280ms;
}

/* =============================================================================
   Typographic scale — semantic aliases
   ============================================================================= */

.krx-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.krx-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.krx-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--fg-1);
}
.krx-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.krx-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}
.krx-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
}
.krx-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-3);
}
.krx-code,
.krx-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-1);
}
.krx-mono-sm {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-2);
}
.krx-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #cdcde0;
}

/* -------- Global base -------- */
.krx-base {
  background: var(--krx-bg);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}