/* Kevin Design System v1.0
 * Canonical values are defined in tools/marketing-kit/brand.json.
 * Regenerate kb-* tokens: python tools/marketing-kit/build_css.py
 * The --kb-* vars below are the authoritative source; :root aliases
 * below maintain backwards compatibility with existing page references.
 */

:root {
  /* Surfaces (dark canvas) */
  --bg: #0a0a0f;
  --surface: #12121a;
  --card: #1a1a26;
  --well: #07070e;
  --border: #2a2a3e;
  --text: #e0e0f0;

  /* Professional accents (UI, headings, KPIs, links, pills) */
  --cyan: #4fc3df;
  --green: #5cc88a;
  --yellow: #d9b441;
  --red: #e56b7a;
  --purple: #9b7adb;
  --magenta: #c79bdf;

  /* Vivid accents (alerts, toasts, errors, charts only) */
  --cyan-vivid: #00d4ff;
  --green-vivid: #00e676;
  --yellow-vivid: #ffd600;
  --red-vivid: #ff1744;
  --purple-vivid: #7c3aed;
  --magenta-vivid: #cc88ff;

  /* Spacing scale (8px base) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;

  /* Border radius */
  --radius-chip: 2px;
  --radius-pill: 3px;
  --radius-panel: 4px;
  --radius-card: 6px;
  --radius-modal: 8px;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, serif;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
}

/* Base components */

nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
  background: rgba(10, 10, 15, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: var(--s-2) 0;
}

button, [role="button"] {
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

button:hover {
  background: var(--card);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(79, 195, 223, 0.2);
}

button:active {
  background: var(--well);
}

/* Cards */
.card, [class*="card"] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s-3);
}

/* Wells / recessed areas */
.well, [class*="well"], code {
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: var(--s-2);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Accents */
.accent-cyan { color: var(--cyan); }
.accent-green { color: var(--green); }
.accent-yellow { color: var(--yellow); }
.accent-red { color: var(--red); }
.accent-purple { color: var(--purple); }
.accent-magenta { color: var(--magenta); }

.bg-cyan { background-color: var(--cyan); }
.bg-green { background-color: var(--green); }
.bg-yellow { background-color: var(--yellow); }
.bg-red { background-color: var(--red); }
.bg-purple { background-color: var(--purple); }
.bg-magenta { background-color: var(--magenta); }

/* Vivid (alerts only) */
.alert-cyan { color: var(--cyan-vivid); }
.alert-green { color: var(--green-vivid); }
.alert-yellow { color: var(--yellow-vivid); }
.alert-red { color: var(--red-vivid); }
.alert-purple { color: var(--purple-vivid); }
.alert-magenta { color: var(--magenta-vivid); }

/* Spacing utilities */
.p-1 { padding: var(--s-1); }
.p-2 { padding: var(--s-2); }
.p-3 { padding: var(--s-3); }
.p-4 { padding: var(--s-4); }
.p-5 { padding: var(--s-5); }
.p-6 { padding: var(--s-6); }
.p-8 { padding: var(--s-8); }

.m-1 { margin: var(--s-1); }
.m-2 { margin: var(--s-2); }
.m-3 { margin: var(--s-3); }
.m-4 { margin: var(--s-4); }
.m-5 { margin: var(--s-5); }
.m-6 { margin: var(--s-6); }
.m-8 { margin: var(--s-8); }

.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }

a {
  color: var(--cyan);
  text-decoration: none;
  transition: opacity 0.15s;
}

a:hover {
  opacity: 0.8;
}

/* Mono for data */
.mono, .hash, .ip {
  font-family: var(--font-mono);
  font-size: 13px;
}