:root {
  --radius-lg: 22px;
  --radius-md: 14px;

  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.24);

  --transition-fast: 160ms ease;
  --transition-med: 260ms ease;
}

/* DARK THEME */
:root,
:root[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-elevated: #11141c;
  --paper: #171b24;
  --paper-2: #1d2330;
  --card: rgba(20, 24, 34, 0.78);

  --overlay-1: rgba(0, 0, 0, 0.62);
  --overlay-2: rgba(0, 0, 0, 0.18);

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);

  --text: rgba(255, 255, 255, 0.94);
  --text-soft: rgba(255, 255, 255, 0.82);
  --muted: rgba(255, 255, 255, 0.66);

  /* varm, litterær accent */
  --accent: #c8843a;
  --accent-soft: rgba(200, 132, 58, 0.18);
  --accent-strong: #e6a35a;
  --accent-border: rgba(230, 163, 90, 0.34);

  /* ekstra farver til status/cards */
  --success: #66b38e;
  --warning: #d9a441;
  --danger: #cf6c6c;
  --info: #7fa7d9;

  /* bog-system farver */
  --character: #8f7ae6;
  --plot: #d98b4d;
  --timeline: #59a8a2;
  --notes: #c6a0d8;

  --hero-glow: radial-gradient(
    circle at top right,
    rgba(230, 163, 90, 0.18),
    transparent 35%
  );
}

/* LIGHT THEME */
:root[data-theme="light"] {
  --bg: #f5f0e8;
  --bg-elevated: #f9f5ef;
  --paper: #fffdf9;
  --paper-2: #f1ebe2;
  --card: rgba(255, 252, 246, 0.84);

  --overlay-1: rgba(255, 255, 255, 0.58);
  --overlay-2: rgba(255, 255, 255, 0.18);

  --border: rgba(48, 38, 28, 0.12);
  --border-strong: rgba(48, 38, 28, 0.2);

  --text: rgba(34, 26, 18, 0.94);
  --text-soft: rgba(34, 26, 18, 0.82);
  --muted: rgba(34, 26, 18, 0.62);

  /* varm papir/blæk-accent */
  --accent: #9f5f2e;
  --accent-soft: rgba(159, 95, 46, 0.12);
  --accent-strong: #b96d36;
  --accent-border: rgba(159, 95, 46, 0.26);

  --success: #3f8c68;
  --warning: #a97816;
  --danger: #b45454;
  --info: #4a78b4;

  --character: #7560c9;
  --plot: #c77430;
  --timeline: #368d87;
  --notes: #a46dba;

  --hero-glow: radial-gradient(
    circle at top right,
    rgba(185, 109, 54, 0.12),
    transparent 38%
  );
}

/* Automatisk theme fra systemet, hvis du ikke sætter data-theme manuelt */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f5f0e8;
    --bg-elevated: #f9f5ef;
    --paper: #fffdf9;
    --paper-2: #f1ebe2;
    --card: rgba(255, 252, 246, 0.84);

    --overlay-1: rgba(255, 255, 255, 0.58);
    --overlay-2: rgba(255, 255, 255, 0.18);

    --border: rgba(48, 38, 28, 0.12);
    --border-strong: rgba(48, 38, 28, 0.2);

    --text: rgba(34, 26, 18, 0.94);
    --text-soft: rgba(34, 26, 18, 0.82);
    --muted: rgba(34, 26, 18, 0.62);

    --accent: #9f5f2e;
    --accent-soft: rgba(159, 95, 46, 0.12);
    --accent-strong: #b96d36;
    --accent-border: rgba(159, 95, 46, 0.26);

    --success: #3f8c68;
    --warning: #a97816;
    --danger: #b45454;
    --info: #4a78b4;

    --character: #7560c9;
    --plot: #c77430;
    --timeline: #368d87;
    --notes: #a46dba;

    --hero-glow: radial-gradient(
      circle at top right,
      rgba(185, 109, 54, 0.12),
      transparent 38%
    );
  }
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  color-scheme: dark light;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    var(--hero-glow),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
  overflow-x: hidden;
  transition:
    background var(--transition-med),
    color var(--transition-fast);
}

/* Eksempler på UI-elementer */
.surface {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
}

.panel {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.button-primary {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.button-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.badge-character {
  background: color-mix(in srgb, var(--character) 18%, transparent);
  color: var(--character);
  border: 1px solid color-mix(in srgb, var(--character) 38%, transparent);
}

.badge-plot {
  background: color-mix(in srgb, var(--plot) 18%, transparent);
  color: var(--plot);
  border: 1px solid color-mix(in srgb, var(--plot) 38%, transparent);
}

.badge-timeline {
  background: color-mix(in srgb, var(--timeline) 18%, transparent);
  color: var(--timeline);
  border: 1px solid color-mix(in srgb, var(--timeline) 38%, transparent);
}

.badge-notes {
  background: color-mix(in srgb, var(--notes) 18%, transparent);
  color: var(--notes);
  border: 1px solid color-mix(in srgb, var(--notes) 38%, transparent);
}