/* =====================================================
   THEMES — every theme is a flat set of CSS variables.
   Add a new theme by adding a new [data-theme="..."] block.
   ===================================================== */

:root {
  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  /* radius scale (themable) */
  --r-1: 6px;  --r-2: 10px; --r-3: 14px;
  --r-4: 18px; --r-5: 24px; --r-pill: 999px;

  /* type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-display: 'Playfair Display', ui-serif, Georgia, serif;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* layout */
  --sidebar-w: 256px;
  --topbar-h: 56px;

  /* --surface-1 / --surface-3 were referenced across the app but never defined,
     so they resolved to transparent (e.g. the notifications dropdown showed the
     page through it). Alias them to defined, themed surfaces. var() is resolved
     at use-time, so they pick up the active theme's opaque colours. --surface-1 is
     the base panel surface; --surface-3 is the raised/hover step (above --surface-2). */
  --surface-1: var(--surface);
  --surface-3: var(--surface-2);
}

/* ====================== NEOCHURCH (default — brand) ====================== */
[data-theme="neochurch"] {
  --bg:           #0c0c0d;
  --bg-tint:      #111114;
  --surface:      #161618;
  --surface-2:   #1d1d20;
  --elevated:    #1d1d20;
  --line:        #25252a;
  --line-strong: #34343b;

  --text:        #f4f4f5;
  --text-2:      #b8b9bf;
  --text-3:      #7c7d85;
  --text-on-accent: #1a1a1a;

  --accent:      #ffcc00;
  --accent-2:    #ffd84d;
  --accent-soft: rgba(255, 204, 0, .12);
  --accent-ring: rgba(255, 204, 0, .32);

  --pos:         #34d399;
  --pos-soft:    rgba(52, 211, 153, .14);
  --neg:         #f87171;
  --neg-soft:    rgba(248, 113, 113, .14);
  --warn:        #fbbf24;
  --warn-soft:   rgba(251, 191, 36, .14);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 4px 18px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg:   0 30px 80px rgba(0, 0, 0, .7), 0 8px 22px rgba(0, 0, 0, .45);

  --sidebar-bg:  #0a0a0b;
  --backdrop:    rgba(0, 0, 0, .65);

  --font-display: 'Playfair Display', var(--font-serif);
}

/* ====================== NOVA (default light) ====================== */
[data-theme="nova"] {
  --bg:           #f7f7f8;
  --bg-tint:      #ffffff;
  --surface:      #ffffff;
  --surface-2:   #f3f4f6;
  --elevated:    #ffffff;
  --line:        #e7e7ea;
  --line-strong: #d4d4d8;

  --text:        #0b0d12;
  --text-2:      #4b5160;
  --text-3:      #8a90a0;
  --text-on-accent: #ffffff;

  --accent:      #6366f1;
  --accent-2:    #818cf8;
  --accent-soft: rgba(99, 102, 241, .10);
  --accent-ring: rgba(99, 102, 241, .35);

  --pos:         #16a34a;
  --pos-soft:    rgba(22, 163, 74, .10);
  --neg:         #dc2626;
  --neg-soft:    rgba(220, 38, 38, .10);
  --warn:        #d97706;
  --warn-soft:   rgba(217, 119, 6, .10);

  --shadow-sm:   0 1px 2px rgba(15, 18, 24, .05);
  --shadow-md:   0 4px 16px rgba(15, 18, 24, .06), 0 1px 2px rgba(15, 18, 24, .04);
  --shadow-lg:   0 24px 60px rgba(15, 18, 24, .12), 0 6px 18px rgba(15, 18, 24, .06);

  --sidebar-bg:  #fbfbfc;
  --backdrop:    rgba(15, 18, 24, .45);
}

/* ====================== ECLIPSE (dark) ====================== */
[data-theme="eclipse"] {
  --bg:           #0a0a0c;
  --bg-tint:      #0f0f12;
  --surface:      #121216;
  --surface-2:   #1a1a20;
  --elevated:    #1c1c22;
  --line:        #25252d;
  --line-strong: #34343f;

  --text:        #f5f5f7;
  --text-2:      #b6b8c3;
  --text-3:      #7c7f8c;
  --text-on-accent: #0a0a0c;

  --accent:      #a5b4fc;
  --accent-2:    #c7d2fe;
  --accent-soft: rgba(165, 180, 252, .14);
  --accent-ring: rgba(165, 180, 252, .35);

  --pos:         #4ade80;
  --pos-soft:    rgba(74, 222, 128, .14);
  --neg:         #f87171;
  --neg-soft:    rgba(248, 113, 113, .14);
  --warn:        #fbbf24;
  --warn-soft:   rgba(251, 191, 36, .14);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg:   0 24px 60px rgba(0, 0, 0, .65), 0 6px 18px rgba(0, 0, 0, .4);

  --sidebar-bg:  #08080a;
  --backdrop:    rgba(0, 0, 0, .6);
}

/* ====================== MIDNIGHT (deep blue) ====================== */
[data-theme="midnight"] {
  --bg:           #070a1a;
  --bg-tint:      #0a0f24;
  --surface:      #0d1430;
  --surface-2:   #121a3d;
  --elevated:    #121a3d;
  --line:        #1d2856;
  --line-strong: #2a3870;

  --text:        #eef0ff;
  --text-2:      #aab2dc;
  --text-3:      #6b75a8;
  --text-on-accent: #0a0f24;

  --accent:      #7dd3fc;
  --accent-2:    #bae6fd;
  --accent-soft: rgba(125, 211, 252, .14);
  --accent-ring: rgba(125, 211, 252, .35);

  --pos:         #4ade80;
  --pos-soft:    rgba(74, 222, 128, .14);
  --neg:         #fb7185;
  --neg-soft:    rgba(251, 113, 133, .14);
  --warn:        #fcd34d;
  --warn-soft:   rgba(252, 211, 77, .14);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 6px 22px rgba(8, 12, 36, .5), 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg:   0 30px 80px rgba(8, 12, 36, .7), 0 8px 22px rgba(0, 0, 0, .4);

  --sidebar-bg:  #050817;
  --backdrop:    rgba(3, 6, 22, .65);
}

/* ====================== FOREST (warm green) ====================== */
[data-theme="forest"] {
  --bg:           #f6f5ef;
  --bg-tint:      #fbfaf3;
  --surface:      #ffffff;
  --surface-2:   #f1efe6;
  --elevated:    #ffffff;
  --line:        #e6e2d2;
  --line-strong: #d3cdb8;

  --text:        #1a2a1e;
  --text-2:      #4a5b4d;
  --text-3:      #7d8a7e;
  --text-on-accent: #ffffff;

  --accent:      #2f7d4a;
  --accent-2:    #4aa867;
  --accent-soft: rgba(47, 125, 74, .10);
  --accent-ring: rgba(47, 125, 74, .35);

  --pos:         #2f7d4a;
  --pos-soft:    rgba(47, 125, 74, .10);
  --neg:         #b91c1c;
  --neg-soft:    rgba(185, 28, 28, .10);
  --warn:        #b45309;
  --warn-soft:   rgba(180, 83, 9, .10);

  --shadow-sm:   0 1px 2px rgba(40, 50, 30, .05);
  --shadow-md:   0 4px 16px rgba(40, 50, 30, .07), 0 1px 2px rgba(40, 50, 30, .04);
  --shadow-lg:   0 24px 60px rgba(40, 50, 30, .14), 0 6px 18px rgba(40, 50, 30, .06);

  --sidebar-bg:  #f0eee2;
  --backdrop:    rgba(40, 50, 30, .45);
}

/* ====================== SUNSET (warm amber) ====================== */
[data-theme="sunset"] {
  --bg:           #fdf6ef;
  --bg-tint:      #fffaf3;
  --surface:      #ffffff;
  --surface-2:   #f7ece0;
  --elevated:    #ffffff;
  --line:        #ecdfd0;
  --line-strong: #d8c3a8;

  --text:        #2a1908;
  --text-2:      #6d4e30;
  --text-3:      #a18467;
  --text-on-accent: #ffffff;

  --accent:      #d97706;
  --accent-2:    #f59e0b;
  --accent-soft: rgba(217, 119, 6, .12);
  --accent-ring: rgba(217, 119, 6, .35);

  --pos:         #16a34a;
  --pos-soft:    rgba(22, 163, 74, .10);
  --neg:         #c2410c;
  --neg-soft:    rgba(194, 65, 12, .12);
  --warn:        #b45309;
  --warn-soft:   rgba(180, 83, 9, .12);

  --shadow-sm:   0 1px 2px rgba(60, 40, 20, .05);
  --shadow-md:   0 4px 16px rgba(60, 40, 20, .07), 0 1px 2px rgba(60, 40, 20, .04);
  --shadow-lg:   0 24px 60px rgba(60, 40, 20, .12), 0 6px 18px rgba(60, 40, 20, .06);

  --sidebar-bg:  #f9eedf;
  --backdrop:    rgba(60, 40, 20, .45);
}

/* ====================== MONO (minimalist) ====================== */
[data-theme="mono"] {
  --bg:           #ffffff;
  --bg-tint:      #ffffff;
  --surface:      #ffffff;
  --surface-2:   #fafafa;
  --elevated:    #ffffff;
  --line:        #ebebeb;
  --line-strong: #d4d4d4;

  --text:        #000000;
  --text-2:      #525252;
  --text-3:      #a3a3a3;
  --text-on-accent: #ffffff;

  --accent:      #0a0a0a;
  --accent-2:    #404040;
  --accent-soft: rgba(10, 10, 10, .06);
  --accent-ring: rgba(10, 10, 10, .25);

  --pos:         #166534;
  --pos-soft:    rgba(22, 101, 52, .08);
  --neg:         #991b1b;
  --neg-soft:    rgba(153, 27, 27, .08);
  --warn:        #92400e;
  --warn-soft:   rgba(146, 64, 14, .08);

  --shadow-sm:   0 1px 0 #ebebeb;
  --shadow-md:   0 1px 0 #ebebeb;
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .05);

  --sidebar-bg:  #ffffff;
  --backdrop:    rgba(0, 0, 0, .45);
}

/* ====================== Radius variants ====================== */
[data-radius="sharp"]   { --r-1: 2px; --r-2: 3px;  --r-3: 4px;  --r-4: 6px;  --r-5: 8px; }
[data-radius="rounded"] { --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 18px; --r-5: 24px; }
[data-radius="soft"]    { --r-1: 10px; --r-2: 14px; --r-3: 20px; --r-4: 28px; --r-5: 36px; }

/* ====================== Density variants ====================== */
[data-density="compact"] {
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 18px;
  --sp-7: 24px;
}

/* ====================== Reduced motion ====================== */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}