/* SkrivSikkert Design Tokens — Sneat Inspired */

:root {
  /* Colors — Sneat palette */
  --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);

  /* Typography — Nunito Sans for friendly professional feel */
  /* See STYLEGUIDE.md for full usage rules */
  --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 weights — consistent hierarchy */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing (4px base unit) */
  --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 — Sneat style */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  --radius-pill: 50rem;

  /* Shadows — Sneat: deeper neutral shadows */
  --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);

  /* Layout */
  --sidebar-width: 288px;
  --sidebar-collapsed: 3.05rem;
  --header-height: 0px;
  --transition: 200ms ease;
  --transition-slow: 400ms ease;

  /* Prevent browser from auto-darkening native controls (scrollbars, inputs, etc.) */
  color-scheme: light;
}

/* Dark mode — controlled ONLY by data-theme attribute, never by prefers-color-scheme */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #111727;
  --color-card: #1a2035;
  --color-sidebar: #1a2035;
  --color-sidebar-hover: rgba(var(--color-primary-rgb), 0.15);
  --color-border: #2a3250;
  --color-text-primary: #e8ecf4;
  --color-text-secondary: #8a92a6;
  --color-text-tertiary: #6c7293;
  --shadow-card: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
  --shadow-sidebar: 0 0 30px rgba(0, 0, 0, 0.2);
  --shadow-bubble: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-mobile-nav: 0 -4px 20px rgba(0, 0, 0, 0.3);
  --shadow-panel: -4px 0 16px rgba(0, 0, 0, 0.3);
}

/* Light mode explicit — no longer needed to counter prefers-color-scheme
   but kept for specificity if data-theme="light" is set */
[data-theme="light"] {
  color-scheme: light;
}

/* ─── Voksen theme (red) ─── */
.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);
}

/* Voksen dark mode */
.v-voksen[data-theme="dark"],
[data-theme="dark"] .v-voksen {
  --color-bg: #111727;
  --color-card: #1a2035;
  --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);
}