:root {
  /* Default values derived from design system */
  --color-background: #050505;
  --color-surface: #0d0d0d;
  --color-primary: #00ff9d;
  --color-secondary: #ffffff;
  --color-text: #ffffff;
  --color-text-dim: #888888;
  --color-border: #222222;
  --color-accent: #00ff9d;
  --color-error: #ff3333;
  --color-glow: rgba(0, 255, 157, 0.4);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;

  --font-family: "Roboto Mono", "Courier New", monospace;
  --font-heading: "DotGothic16", "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-accent: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-h1: 32px;

  --motion-curve: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-speed-fast: 150ms;
  --motion-speed-normal: 300ms;
  --motion-speed-slow: 500ms;

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 12px;

  --shadow-glow: 0 0 10px var(--color-glow);
  --shadow-glow-large: 0 0 20px var(--color-glow);
}

* {
  box-sizing: border-box;
}

html,
body {
  background-color: #050505;
  /* Fallback before tokens inject */
  color: #ffffff;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  /* Prevent horizontal scroll */
  overflow-y: auto;
  /* Allow vertical scroll to below-fold content */
}

body {
  background: var(--kb-stage-bg) !important;
  background-attachment: fixed !important;
  color: var(--color-text);
  font-family: var(--font-body, var(--font-family));
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kb-stage-grid);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--motion-speed-fast) var(--motion-curve);
}

a:hover {
  opacity: 0.8;
  text-shadow: var(--shadow-glow);
}

/* Custom Scrollbar for Cyber Aesthetic */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Heatmap View: Transition for key backgrounds */
.cm-heatmap-view .cm-key {
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.cm-heatmap-view .cm-key--history {
  border-color: var(--color-border);
  box-shadow: none;
}

/* Focus mode visuals are handled in dashboard.css */