/**
 * Northforge Security Toolkit Design System
 * Neutral dark with amber/cyan accents
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Background Colors */
  --bg-primary: #0f1216;
  --bg-surface: #171b21;
  --bg-elevated: #1d232b;
  --bg-input: #0f1216;
  
  /* Text Colors */
  --text-primary: #e6edf3;
  --text-secondary: #9aa7b5;
  --text-muted: #6e7b89;
  --text-on-primary: #101317;
  
  /* Accent Colors */
  --accent-primary: #d9a441;
  --accent-primary-hover: #e1b45f;
  --accent-secondary: #6f8aa8;
  --accent-success: #5dbb8a;
  --accent-warning: #c97a35;
  --accent-error: #cc5e5e;
  --accent-cyan: #57b6c2;
  --accent-orange: #c97a35;
  
  /* Border Colors */
  --border: #2a323c;
  --border-hover: #4f5e6e;
  
  /* Typography */
  --font-ui: 'Space Grotesk', 'IBM Plex Sans', 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrainsMono Nerd Font', 'FiraCode Nerd Font', 'SFMono Nerd Font', monospace;
  
  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 24px;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  
  /* Line Heights */
  --leading-tight: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
  
  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  
  /* Shadows (minimal) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  
  /* Layout */
  --sidebar-width: 240px;
  --header-height: 56px;
  --surface-opacity: 90%;
  --elevated-surface-opacity: 92%;
  --panel-blur: 2px;

  /* Themed overlays */
  --selection-bg: rgba(217, 164, 65, 0.3);
  --sidebar-active-bg: rgba(217, 164, 65, 0.12);
}

/* Theme: Solarized Osaka Dark High Contrast */
html[data-theme='solarized-osaka-hc'] {
  --bg-primary: #00131f;
  --bg-surface: #071d2a;
  --bg-elevated: #0d2837;
  --bg-input: #00131f;
  --text-primary: #f1f5f8;
  --text-secondary: #96aebb;
  --text-muted: #6f8797;
  --text-on-primary: #001018;
  --accent-primary: #b58900;
  --accent-primary-hover: #d3a521;
  --accent-secondary: #268bd2;
  --accent-success: #2aa198;
  --accent-warning: #cb4b16;
  --accent-error: #dc322f;
  --accent-cyan: #2aa198;
  --accent-orange: #cb4b16;
  --border: #1e3b4d;
  --border-hover: #386276;
  --selection-bg: rgba(181, 137, 0, 0.34);
  --sidebar-active-bg: rgba(181, 137, 0, 0.18);
}

/* Theme: Tokyo Night */
html[data-theme='tokyo-night'] {
  --bg-primary: #1a1b26;
  --bg-surface: #1f2335;
  --bg-elevated: #24283b;
  --bg-input: #16161e;
  --text-primary: #c0caf5;
  --text-secondary: #9aa5ce;
  --text-muted: #6b7394;
  --text-on-primary: #11121a;
  --accent-primary: #7aa2f7;
  --accent-primary-hover: #8ab6ff;
  --accent-secondary: #bb9af7;
  --accent-success: #9ece6a;
  --accent-warning: #e0af68;
  --accent-error: #f7768e;
  --accent-cyan: #7dcfff;
  --accent-orange: #ff9e64;
  --border: #2f3552;
  --border-hover: #4a5380;
  --selection-bg: rgba(122, 162, 247, 0.33);
  --sidebar-active-bg: rgba(122, 162, 247, 0.17);
}

/* Theme: Cobalt2 */
html[data-theme='cobalt2'] {
  --bg-primary: #102338;
  --bg-surface: #16324d;
  --bg-elevated: #1d3f5f;
  --bg-input: #102338;
  --text-primary: #e8f1ff;
  --text-secondary: #a8c1e5;
  --text-muted: #7393bf;
  --text-on-primary: #08121d;
  --accent-primary: #ffc600;
  --accent-primary-hover: #ffd84d;
  --accent-secondary: #5ccfe6;
  --accent-success: #3ad900;
  --accent-warning: #ff9d00;
  --accent-error: #ff628c;
  --accent-cyan: #5ccfe6;
  --accent-orange: #ff9d00;
  --border: #2c5074;
  --border-hover: #4d7399;
  --selection-bg: rgba(255, 198, 0, 0.32);
  --sidebar-active-bg: rgba(255, 198, 0, 0.17);
}

/* Theme: Ayu Dark */
html[data-theme='ayu-dark'] {
  --bg-primary: #0f1419;
  --bg-surface: #131b24;
  --bg-elevated: #1b2632;
  --bg-input: #0f1419;
  --text-primary: #e6e1cf;
  --text-secondary: #b3b1a7;
  --text-muted: #7d8590;
  --text-on-primary: #0f1419;
  --accent-primary: #ffb454;
  --accent-primary-hover: #ffc074;
  --accent-secondary: #59c2ff;
  --accent-success: #aad94c;
  --accent-warning: #ff8f40;
  --accent-error: #f07178;
  --accent-cyan: #95e6cb;
  --accent-orange: #ff8f40;
  --border: #253244;
  --border-hover: #3d4d63;
  --selection-bg: rgba(255, 180, 84, 0.32);
  --sidebar-active-bg: rgba(255, 180, 84, 0.18);
}

/* Theme: Nord Night (custom) */
html[data-theme='nord-night'] {
  --bg-primary: #2e3440;
  --bg-surface: #343b48;
  --bg-elevated: #3b4252;
  --bg-input: #2b313d;
  --text-primary: #eceff4;
  --text-secondary: #d8dee9;
  --text-muted: #a3adb9;
  --text-on-primary: #1f2530;
  --accent-primary: #88c0d0;
  --accent-primary-hover: #9cd0de;
  --accent-secondary: #81a1c1;
  --accent-success: #a3be8c;
  --accent-warning: #ebcb8b;
  --accent-error: #bf616a;
  --accent-cyan: #8fbcbb;
  --accent-orange: #d08770;
  --border: #4c566a;
  --border-hover: #6a7385;
  --selection-bg: rgba(136, 192, 208, 0.31);
  --sidebar-active-bg: rgba(136, 192, 208, 0.18);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
}

/* Selection */
::selection {
  background-color: var(--selection-bg);
  color: var(--text-primary);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}