/* NueroNova — Design System v3 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Typography ── */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:  11px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  20px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── Layout ── */
  --nav-width:     248px;
  --rail-width:     48px;
  --header-height:  52px;

  /* ── Dark surfaces (layered depth) ── */
  --bg-app:            #080b0f;
  --bg-surface:        #0d1117;
  --bg-surface-2:      #161b22;
  --bg-surface-hover:  #1c2330;
  --bg-surface-active: #21293a;
  --bg-input:          #0d1117;
  --bg-overlay:        #1c2330;

  /* ── Borders ── */
  --border-subtle:    rgba(48, 54, 66, 0.8);
  --border-color:     #30363d;
  --border-highlight: #484f58;

  /* ── Text ── */
  --fg-primary:   #e6edf3;
  --fg-secondary: #8b949e;
  --fg-muted:     #484f58;
  --fg-on-accent: #080b0f;

  /* ── Accent: white/near-white only ── */
  /* Used for: active nav items, focus rings, primary CTA buttons */
  --accent:      #e6edf3;
  --accent-dim:  rgba(230, 237, 243, 0.08);
  --accent-hover: #c9d1d9;
  --accent-text:  #e6edf3;

  /* ── Semantic (status use only) ── */
  --success:     #3fb950;
  --success-dim: rgba(63, 185, 80, 0.12);
  --warning:     #d29922;
  --warning-dim: rgba(210, 153, 34, 0.12);
  --danger:      #f85149;
  --danger-dim:  rgba(248, 81, 73, 0.12);
  --info:        #388bfd;
  --info-dim:    rgba(56, 139, 253, 0.12);

  /* ── Shape ── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);

  /* ── Motion ── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.0,  0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4,  0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    350ms;

  /* Legacy alias helper to prevent breakage */
  --duration-fast: var(--dur-fast);
}

/* ── Light Theme ── */
body.light-theme {
  --bg-app:            #ffffff;
  --bg-surface:        #f6f8fa;
  --bg-surface-2:      #eaeef2;
  --bg-surface-hover:  #e1e4e8;
  --bg-surface-active: #d0d7de;
  --bg-input:          #ffffff;
  --bg-overlay:        #ffffff;

  --border-subtle:    rgba(209, 213, 218, 0.6);
  --border-color:     #d0d7de;
  --border-highlight: #8c959f;

  --fg-primary:   #1f2328;
  --fg-secondary: #636c76;
  --fg-muted:     #9198a1;
  --fg-on-accent: #ffffff;

  --accent:      #1f2328;
  --accent-dim:  rgba(31, 35, 40, 0.08);
  --accent-hover: #32383f;
  --accent-text:  #1f2328;
}

/* ── Compact Mode ── */
body.compact-mode {
  --nav-width:     220px;
  --header-height:  40px;
  --text-sm:        12px;
  --text-md:        13px;
}

/* ── Reduce Motion ── */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* ── Global Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg-app);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}

button { all: unset; cursor: pointer; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-highlight); }

/* ── Selection ── */
::selection {
  background: var(--accent-dim);
  color: var(--fg-primary);
}

/* ── Focus Ring ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}