/* ============================================
   BASE STYLES & CSS VARIABLES
   ============================================ */

:root {
  --font-base: "Inter", "Roboto", "Manrope", "Segoe UI", sans-serif;
  --color-bg: #eff2f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #d5dae1;
  --color-divider: #e5e7eb;
  --color-text: #1f2433;
  --color-muted: #4f5d6f;
  --color-subtle: #6b778a;
  --color-primary: #1b2e4b;
  --color-primary-strong: #13223a;
  --color-topbar: #101725;
  --color-field-bg: #f9fafc;
  --color-accent: #028152;
  --color-accent-strong: #007248;
  --color-success: #179143;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-quiet: 0 1px 2px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.08);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

a {
  color: var(--color-primary);
}

/* Container - adjusted for sidebar layout */
.container {
  width: 100%;
  padding: var(--space-3);
}

.container-narrow {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: var(--space-3);
}