/* ============================================
   Vitronia — Design System
   Tokens, reset, dark mode, typography, utilities
   Slate/Indigo palette + Inter font
   ============================================ */

/* --- Color Tokens --- */
:root, [data-theme="light"] {
  /* Surfaces — Slate-based */
  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;
  --surface-sidebar: #f1f5f9;
  --surface-hover: rgba(15,23,42,0.04);
  --surface-active: rgba(15,23,42,0.06);

  /* Text — Slate */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;

  /* Border — Slate */
  --border-default: #e2e8f0;
  --border-subtle: #f1f5f9;

  /* Accent — Indigo */
  --accent-primary: #6366f1;
  --accent-primary-hover: #4f46e5;
  --accent-primary-light: #eef2ff;
  --accent-success: #059669;
  --accent-success-light: #d1fae5;
  --accent-warning: #d97706;
  --accent-warning-light: #fef3c7;
  --accent-danger: #dc2626;
  --accent-danger-light: #fee2e2;

  /* User bubble — Indigo tint */
  --user-bubble: #eef2ff;
  --user-bubble-text: #312e81;

  /* Shadows — Slate-tinted */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.07), 0 2px 4px -2px rgba(15,23,42,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.04);

  /* Code — Slate */
  --code-bg: #1e293b;
  --code-text: #e2e8f0;
  --code-header: #334155;
  --code-inline-bg: #f1f5f9;
  --code-inline-text: #334155;

  /* Focus ring — Indigo */
  --focus-ring: rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] {
  /* Surfaces — Deep slate */
  --surface-primary: #0f172a;
  --surface-secondary: #1e293b;
  --surface-sidebar: #0f172a;
  --surface-hover: rgba(255,255,255,0.06);
  --surface-active: rgba(255,255,255,0.08);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;

  /* Border */
  --border-default: #334155;
  --border-subtle: #1e293b;

  /* Accent — Indigo (brighter for dark) */
  --accent-primary: #818cf8;
  --accent-primary-hover: #a5b4fc;
  --accent-primary-light: rgba(99,102,241,0.15);
  --accent-success: #34d399;
  --accent-success-light: rgba(5,150,105,0.15);
  --accent-warning: #fbbf24;
  --accent-warning-light: rgba(217,119,6,0.15);
  --accent-danger: #f87171;
  --accent-danger-light: rgba(220,38,38,0.15);

  /* User bubble */
  --user-bubble: rgba(99,102,241,0.15);
  --user-bubble-text: #c7d2fe;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);

  /* Code */
  --code-bg: #0f172a;
  --code-text: #e2e8f0;
  --code-header: #1e293b;
  --code-inline-bg: #334155;
  --code-inline-text: #cbd5e1;

  /* Focus ring */
  --focus-ring: rgba(129, 140, 248, 0.35);
}

/* --- Spacing Scale (8px grid) --- */
:root {
  --space-0: 0;
  --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;
  --space-16: 64px;
}

/* --- Border Radius --- */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
}

/* --- Typography --- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --line-height: 1.6;
}

/* --- Transitions --- */
:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-spring: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04';
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--text-primary);
  background: var(--surface-secondary);
  min-height: 100vh;
}

/* Focus visible ring */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Page enter animation --- */
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

main, .container, .container-narrow {
  animation: pageIn 0.2s ease;
}

/* --- Utility Classes --- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: var(--space-2); }
.gap-2 { gap: var(--space-4); }
.gap-3 { gap: var(--space-6); }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.text-muted { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}