:root {
  color-scheme: light;

  --16px: 1rem;

  /* Layout */
  --page-max-width: 960px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.10);

  /* Light theme colors (nye tokens) */
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-soft: #f9fafb;

  --stroke: #e9ecf2;

  --color-primary: #4f46e5;
  --color-primary-soft: rgba(79, 70, 229, 0.08);

  --color-accent: #f97316;

  --color-text: #111827;
  --color-text-muted: #6b7280;

  --color-border-subtle: rgba(15, 23, 42, 0.08);
  --color-input-bg: rgba(255, 255, 255, 0.9);

  /* 🔗 ALIAS til eksisterende komponenter (GlAppStyles + account-view) */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);

  --primary: var(--color-primary);
  --accent: var(--color-accent);

  --text: var(--color-text);
  --muted: var(--color-text-muted);
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #020617;
  --color-surface: #020617;
  --color-surface-soft: #020617;

  --stroke: #1f2533;

  --color-primary: #6366f1;
  --color-primary-soft: rgba(129, 140, 248, 0.15);

  --color-accent: #fb923c;

  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;

  --color-border-subtle: rgba(148, 163, 184, 0.25);
  --color-input-bg: rgba(15, 23, 42, 0.9);

  /* 🔗 alias til gamle variabler */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);

  --primary: var(--color-primary);
  --accent: var(--color-accent);

  --text: var(--color-text);
  --muted: var(--color-text-muted);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: radial-gradient(circle at top, #1d1b4e 0, transparent 55%),
    var(--color-bg);
  color: var(--color-text);
}