:root {
  --bg: #f9f6f1;
  --surface: #ffffff;
  --surface2: #f3ede4;
  --surface3: #ece4d8;
  --border: rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.12);
  --ink: #1c1714;
  --ink-soft: #554b45;
  --ink-muted: #74685f;
  --text-primary: #1c1714;
  --text-secondary: #554b45;
  --text-muted: #74685f;
  --text-on-accent: #ffffff;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(255,255,255,0.8);
  --surface-overlay-soft: rgba(255,255,255,0.72);
  --surface-overlay-strong: rgba(255,255,255,0.9);
  --nav-bg: rgba(249,246,241,0.92);
  --hope-strong: #1a5c52;

  --hope: #2a7d6f;      /* grønn — fremgang, håp */
  --hope-dim: rgba(42,125,111,0.1);
  --hope-light: #e8f5f2;
  --warm: #c4622d;      /* varm oransje — energi, handling */
  --warm-dim: rgba(196,98,45,0.1);
  --calm: #4a6fa5;      /* rolig blå — trygghet */
  --calm-dim: rgba(74,111,165,0.1);
  --sun: #e8a020;       /* gul — seier, feiring */
  --sun-dim: rgba(232,160,32,0.1);
  --soft-red: #c94b4b;
  --soft-red-dim: rgba(201,75,75,0.08);

  --chart-down: #2a7d6f;      /* grønn linje (snøball) */
  --chart-down-fill: rgba(42,125,111,0.12);
  --chart-up:   #c94b4b;      /* rød linje (uten betaling) */
  --chart-up-fill: rgba(201,75,75,0.08);
  --chart-actual: #4a6fa5;    /* blå — faktisk betaling */
  --chart-actual-fill: rgba(74,111,165,0.1);

  --chart-grid: rgba(0,0,0,0.05);
  --chart-axis: rgba(28,23,20,0.5);
  --chart-axis-tick: rgba(28,23,20,0.15);

  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 11px;

  --shadow-sm: 0 6px 16px rgba(28,23,20,0.08);
  --shadow-md: 0 14px 34px rgba(28,23,20,0.10);
  --shadow-lg: 0 24px 60px rgba(28,23,20,0.12);

  --card-bg: var(--surface);
  --card-bg-soft: var(--surface2);
  --card-border: var(--border);
  --card-shadow: var(--shadow-sm);

  --status-success-bg: var(--hope-dim);
  --status-success-fg: var(--hope);
  --status-success-border: color-mix(in srgb, var(--hope) 24%, transparent);
  --status-info-bg: var(--calm-dim);
  --status-info-fg: var(--calm);
  --status-info-border: color-mix(in srgb, var(--calm) 24%, transparent);
  --status-warn-bg: var(--sun-dim);
  --status-warn-fg: #9a6400;
  --status-warn-border: color-mix(in srgb, var(--sun) 28%, transparent);
  --status-danger-bg: var(--soft-red-dim);
  --status-danger-fg: var(--soft-red);
  --status-danger-border: color-mix(in srgb, var(--soft-red) 26%, transparent);
  --status-neutral-bg: var(--surface2);
  --status-neutral-fg: var(--ink-soft);
  --status-neutral-border: var(--border);
}

/* -- DARK MODE -- */
[data-theme="dark"] {
  --bg:        #0d0c0a;
  --surface:   #1c1a17;
  --surface2:  #26231f;
  --surface3:  #312d28;
  --border:    rgba(255,255,255,0.14);
  --border2:   rgba(255,255,255,0.24);
  --ink:       #f6f1ea;
  --ink-soft:  #dfd4c8;
  --ink-muted: #c9bdae;
  --text-primary: #f6f1ea;
  --text-secondary: #dfd4c8;
  --text-muted: #c9bdae;
  --text-on-accent: #ffffff;
  --surface-elevated: #2b2722;
  --surface-overlay: rgba(43,39,34,0.86);
  --surface-overlay-soft: rgba(43,39,34,0.80);
  --surface-overlay-strong: rgba(43,39,34,0.94);
  --nav-bg: rgba(13,12,10,0.96);
  --hope-strong: #2e8879;

  --hope:      #3d9e8e;
  --hope-dim:  rgba(61,158,142,0.12);
  --hope-light: rgba(61,158,142,0.1);
  --warm:      #d4784a;
  --warm-dim:  rgba(212,120,74,0.12);
  --calm:      #6b8fc4;
  --calm-dim:  rgba(107,143,196,0.12);
  --sun:       #e8b040;
  --sun-dim:   rgba(232,176,64,0.12);
  --soft-red:  #e06060;
  --soft-red-dim: rgba(224,96,96,0.1);

  --chart-down:       #3d9e8e;
  --chart-down-fill:  rgba(61,158,142,0.10);
  --chart-up:         #e06060;
  --chart-up-fill:    rgba(224,96,96,0.08);
  --chart-actual:     #6b8fc4;
  --chart-actual-fill: rgba(107,143,196,0.10);
  --chart-grid:       rgba(255,255,255,0.04);
  --chart-axis:       rgba(240,235,228,0.4);
  --chart-axis-tick:  rgba(240,235,228,0.12);

  --shadow-sm: 0 6px 16px rgba(0,0,0,0.30);
  --shadow-md: 0 14px 34px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.40);

  --card-bg: var(--surface);
  --card-bg-soft: var(--surface2);
  --card-border: var(--border);
  --card-shadow: var(--shadow-sm);

  --status-success-bg: var(--hope-dim);
  --status-success-fg: var(--hope);
  --status-success-border: color-mix(in srgb, var(--hope) 26%, transparent);
  --status-info-bg: var(--calm-dim);
  --status-info-fg: var(--calm);
  --status-info-border: color-mix(in srgb, var(--calm) 26%, transparent);
  --status-warn-bg: var(--sun-dim);
  --status-warn-fg: #f0bf64;
  --status-warn-border: color-mix(in srgb, var(--sun) 30%, transparent);
  --status-danger-bg: var(--soft-red-dim);
  --status-danger-fg: var(--soft-red);
  --status-danger-border: color-mix(in srgb, var(--soft-red) 28%, transparent);
  --status-neutral-bg: var(--surface2);
  --status-neutral-fg: var(--ink-soft);
  --status-neutral-border: var(--border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d0c0a;
    --surface:   #1c1a17;
    --surface2:  #26231f;
    --surface3:  #312d28;
    --border:    rgba(255,255,255,0.14);
    --border2:   rgba(255,255,255,0.24);
    --ink:       #f6f1ea;
    --ink-soft:  #dfd4c8;
    --ink-muted: #c9bdae;
    --text-primary: #f6f1ea;
    --text-secondary: #dfd4c8;
    --text-muted: #c9bdae;
    --text-on-accent: #ffffff;
    --surface-elevated: #2b2722;
    --surface-overlay: rgba(43,39,34,0.86);
    --surface-overlay-soft: rgba(43,39,34,0.80);
    --surface-overlay-strong: rgba(43,39,34,0.94);
    --nav-bg: rgba(13,12,10,0.96);
    --hope-strong: #2e8879;
    --hope:      #3d9e8e;
    --hope-dim:  rgba(61,158,142,0.12);
    --hope-light: rgba(61,158,142,0.1);
    --warm:      #d4784a;
    --warm-dim:  rgba(212,120,74,0.12);
    --calm:      #6b8fc4;
    --calm-dim:  rgba(107,143,196,0.12);
    --sun:       #e8b040;
    --sun-dim:   rgba(232,176,64,0.12);
    --soft-red:  #e06060;
    --soft-red-dim: rgba(224,96,96,0.1);
    --chart-down:       #3d9e8e;
    --chart-down-fill:  rgba(61,158,142,0.10);
    --chart-up:         #e06060;
    --chart-up-fill:    rgba(224,96,96,0.08);
    --chart-actual:     #6b8fc4;
    --chart-actual-fill: rgba(107,143,196,0.10);
    --chart-grid:       rgba(255,255,255,0.04);
    --chart-axis:       rgba(240,235,228,0.4);
    --chart-axis-tick:  rgba(240,235,228,0.12);
    --shadow-sm: 0 6px 16px rgba(0,0,0,0.30);
    --shadow-md: 0 14px 34px rgba(0,0,0,0.35);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.40);
  }
}

* { margin:0; padding:0; box-sizing:border-box; }