:root {
  
  --color-primary: #696cff;
  --color-primary-hover: #5a5ee0;
  --color-primary-light: rgba(105, 108, 255, 0.12);
  --color-primary-rgb: 105, 108, 255;
  --color-accent: #079aa2;
  --color-accent-hover: #067a80;
  --color-bg: #f5f5f9;
  --color-sidebar: #ffffff;
  --color-sidebar-hover: rgba(var(--color-primary-rgb), 0.08);
  --color-sidebar-active: rgba(var(--color-primary-rgb), 0.16);
  --color-card: #ffffff;
  --color-border: #e4e6e8;
  --color-text-primary: #384551;
  --color-text-secondary: #646e78;
  --color-text-tertiary: #767a86;
  --color-success: #71dd37;
  --color-success-light: rgba(113, 221, 55, 0.12);
  --color-warning: #ffab00;
  --color-warning-light: rgba(255, 171, 0, 0.12);
  --color-error: #ff3e1d;
  --color-error-hover: #e0371a;
  --color-error-light: rgba(255, 62, 29, 0.12);
  --color-info: #03c3ec;
  --color-info-light: rgba(3, 195, 236, 0.12);

  
  
  --font-family: 'Nunito Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

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

  
  --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;

  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  --radius-pill: 50rem;

  
  --shadow-sm: 0 1px 3px rgba(34, 48, 62, 0.1);
  --shadow-card: 0 3px 8px 0 rgba(34, 48, 62, 0.1);
  --shadow-hover: 0 4px 12px 0 rgba(34, 48, 62, 0.16);
  --shadow-modal: 0 8px 24px rgba(34, 48, 62, 0.2);
  --shadow-sidebar: 0 2px 6px rgba(34, 48, 62, 0.08);
  --shadow-bubble: 0 1px 2px rgba(34, 48, 62, 0.06);
  --shadow-popup: 0 4px 16px rgba(34, 48, 62, 0.14);
  --shadow-mobile-nav: 0 -4px 20px rgba(34, 48, 62, 0.08);
  --shadow-panel: -4px 0 16px rgba(34, 48, 62, 0.12);

  
  --sidebar-width: 260px;
  --sidebar-collapsed: 80px;
  --header-height: 0px;
  --transition: 200ms ease;
  --transition-slow: 400ms ease;

  
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1c1b18;
  --color-card: #2b2a27;
  --color-sidebar: #232220;
  --color-sidebar-hover: rgba(255, 255, 255, 0.06);
  --color-sidebar-active: rgba(255, 255, 255, 0.10);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text-primary: #e8e6e1;
  --color-text-secondary: #a3a19b;
  --color-text-tertiary: #7a7872;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-sidebar: 0 0 20px rgba(0, 0, 0, 0.25);
  --shadow-bubble: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-mobile-nav: 0 -4px 20px rgba(0, 0, 0, 0.35);
  --shadow-panel: -4px 0 16px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] {
  color-scheme: light;
}

.v-voksen {
  --color-bg: #FAFAF8;
  --color-primary: #e24668;
  --color-primary-hover: #c93d5b;
  --color-primary-light: rgba(226, 70, 104, 0.12);
  --color-primary-rgb: 226, 70, 104;
  --color-sidebar-hover: rgba(var(--color-primary-rgb), 0.06);
  --color-sidebar-active: rgba(var(--color-primary-rgb), 0.10);
}

.v-voksen[data-theme="dark"],
[data-theme="dark"] .v-voksen {
  --color-bg: #1c1b18;
  --color-card: #2b2a27;
  --color-primary: #e8607e;
  --color-primary-hover: #e24668;
  --color-primary-light: rgba(226, 70, 104, 0.16);
  --color-primary-rgb: 232, 96, 126;
  --color-sidebar-hover: rgba(var(--color-primary-rgb), 0.10);
  --color-sidebar-active: rgba(var(--color-primary-rgb), 0.14);
}