: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: #6b5f55;
  --ink-muted: #a8998c;

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

/* -- DARK MODE -- */
[data-theme="dark"] {
  --bg:        #0f0e0c;
  --surface:   #1a1814;
  --surface2:  #211f1b;
  --surface3:  #2a2723;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --ink:       #f0ebe4;
  --ink-soft:  #a89d92;
  --ink-muted: #6b5f55;

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f0e0c;
    --surface:   #1a1814;
    --surface2:  #211f1b;
    --surface3:  #2a2723;
    --border:    rgba(255,255,255,0.07);
    --border2:   rgba(255,255,255,0.12);
    --ink:       #f0ebe4;
    --ink-soft:  #a89d92;
    --ink-muted: #6b5f55;
    --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; }