/* ===== Theme Palettes ===== */
/* Each theme defines the same set of CSS custom properties. */
/* The entire site references only these variables, never hard-coded colors. */

/* ============================================
   TEFLON (Neutral) — Heading: EB Garamond (default)
   ============================================ */

/* ===== Weiß ===== */
:root {
  --color-bg:             #FFFFFF;
  --color-bg-secondary:   #F5F5F5;
  --color-surface:        #FAFAFA;
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-muted:     #999999;
  --color-accent:         #1A1A1A;
  --color-accent-hover:   #333333;
  --color-border:         #E0E0E0;
  --color-header-bg:      rgba(255, 255, 255, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.05);
  --color-code-bg:        #F5F5F5;
  --color-switcher-bg:    #FFFFFF;
  --color-switcher-border:#E0E0E0;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         var(--color-bg);
  --color-sub-text:       var(--color-text-primary);
  --color-sub-border:     var(--color-text-primary);
  --color-page-bg:        var(--color-bg);

  /* Per-card colors (uniform for non-Lebhaft themes) */
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);

  /* Shared design tokens */
  --font-body:            'iA Writer Quattro S', 'iA Writer Quattro', 'IBM Plex Mono', monospace;
  --font-heading:         'EB Garamond', 'Georgia', serif;
  --font-heading-weight:  400;
  --font-mono:            'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --content-width:        680px;
  --page-width:           960px;
  --radius:               6px;
  --transition-speed:     0.25s;
}

/* ===== Hell ===== */
[data-theme="hell"] {
  --color-bg:             #FAF8F5;
  --color-bg-secondary:   #F0EDE8;
  --color-surface:        #FFFDF9;
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;
  --color-accent:         #2563EB;
  --color-accent-hover:   #1D4ED8;
  --color-border:         #E5E5E5;
  --color-header-bg:      rgba(250, 250, 250, 0.85);
  --color-shadow:         rgba(0, 0, 0, 0.06);
  --color-code-bg:        #F5F5F5;
  --color-switcher-bg:    #FFFFFF;
  --color-switcher-border:#E0E0E0;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         var(--color-bg);
  --color-sub-text:       var(--color-text-primary);
  --color-sub-border:     var(--color-text-primary);
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ===== Dunkel ===== */
[data-theme="dunkel"] {
  --color-bg:             #111111;
  --color-bg-secondary:   #1A1A1A;
  --color-surface:        #1E1E1E;
  --color-text-primary:   #E8E8E8;
  --color-text-secondary: #A0A0A0;
  --color-text-muted:     #666666;
  --color-accent:         #60A5FA;
  --color-accent-hover:   #93C5FD;
  --color-border:         #2A2A2A;
  --color-header-bg:      rgba(17, 17, 17, 0.85);
  --color-shadow:         rgba(0, 0, 0, 0.3);
  --color-code-bg:        #1A1A1A;
  --color-switcher-bg:    #1E1E1E;
  --color-switcher-border:#333333;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         var(--color-bg);
  --color-sub-text:       var(--color-text-primary);
  --color-sub-border:     var(--color-text-primary);
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ============================================
   PEOPLE PLEASER (Pastel) — Heading: Gambarino
   ============================================ */

/* ===== Rosa-Schwarz ===== */
[data-theme="rosa-schwarz"] {
  --font-heading: 'Gambarino', 'Georgia', serif;
  --color-bg:             #D4B8B8;
  --color-bg-secondary:   #C8AAAA;
  --color-surface:        #DCCCCC;
  --color-text-primary:   #0A0A0A;
  --color-text-secondary: #1A1A1A;
  --color-text-muted:     #5A4848;
  --color-accent:         #0A0A0A;
  --color-accent-hover:   #1A1A1A;
  --color-border:         #0A0A0A;
  --color-header-bg:      rgba(212, 184, 184, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.1);
  --color-code-bg:        #C8AAAA;
  --color-switcher-bg:    #DCCCCC;
  --color-switcher-border:#0A0A0A;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         #C8B440;
  --color-sub-text:       #0A0A0A;
  --color-sub-border:     #0A0A0A;
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ===== Flieder (Lavender/Mauve) ===== */
[data-theme="flieder"] {
  --font-heading: 'Gambarino', 'Georgia', serif;
  --color-bg:             #C8B8D8;
  --color-bg-secondary:   #BBAACC;
  --color-surface:        #D4C8E0;
  --color-text-primary:   #1A1020;
  --color-text-secondary: #2A2030;
  --color-text-muted:     #6A5A78;
  --color-accent:         #1A1020;
  --color-accent-hover:   #2A2030;
  --color-border:         #1A1020;
  --color-header-bg:      rgba(200, 184, 216, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.1);
  --color-code-bg:        #BBAACC;
  --color-switcher-bg:    #D4C8E0;
  --color-switcher-border:#1A1020;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         #E8C8A0;
  --color-sub-text:       #1A1020;
  --color-sub-border:     #1A1020;
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ===== Salbei (Sage green) ===== */
[data-theme="salbei"] {
  --font-heading: 'Gambarino', 'Georgia', serif;
  --color-bg:             #B8C8B0;
  --color-bg-secondary:   #AABBA0;
  --color-surface:        #C4D4BB;
  --color-text-primary:   #101A10;
  --color-text-secondary: #202A20;
  --color-text-muted:     #5A6858;
  --color-accent:         #101A10;
  --color-accent-hover:   #202A20;
  --color-border:         #101A10;
  --color-header-bg:      rgba(184, 200, 176, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.1);
  --color-code-bg:        #AABBA0;
  --color-switcher-bg:    #C4D4BB;
  --color-switcher-border:#101A10;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         #D8C0A8;
  --color-sub-text:       #101A10;
  --color-sub-border:     #101A10;
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ===== Sand (Warm beige) ===== */
[data-theme="sand"] {
  --font-heading: 'Gambarino', 'Georgia', serif;
  --color-bg:             #D8CDB8;
  --color-bg-secondary:   #CCBFAA;
  --color-surface:        #E0D6C4;
  --color-text-primary:   #1A1510;
  --color-text-secondary: #2A2520;
  --color-text-muted:     #7A6E60;
  --color-accent:         #1A1510;
  --color-accent-hover:   #2A2520;
  --color-border:         #1A1510;
  --color-header-bg:      rgba(216, 205, 184, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.1);
  --color-code-bg:        #CCBFAA;
  --color-switcher-bg:    #E0D6C4;
  --color-switcher-border:#1A1510;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         #B8A090;
  --color-sub-text:       #1A1510;
  --color-sub-border:     #1A1510;
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ============================================
   UNRUND (On the edge) — Heading: Switzer 800
   ============================================ */

/* ===== Rot-Schwarz ===== */
[data-theme="rot-schwarz"] {
  --font-heading: 'Switzer', 'Helvetica Neue', 'Arial', sans-serif;
  --font-heading-weight: 800;
  --color-bg:             #E03020;
  --color-bg-secondary:   #D02818;
  --color-surface:        #E84030;
  --color-text-primary:   #080808;
  --color-text-secondary: #181818;
  --color-text-muted:     #401010;
  --color-accent:         #080808;
  --color-accent-hover:   #181818;
  --color-border:         #080808;
  --color-header-bg:      rgba(224, 48, 32, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.2);
  --color-code-bg:        #D02818;
  --color-switcher-bg:    #E84030;
  --color-switcher-border:#080808;
  --color-card-alt:       var(--color-bg);
  --color-card-alt-text:  var(--color-text-primary);
  --color-sub-bg:         var(--color-bg);
  --color-sub-text:       var(--color-text-primary);
  --color-sub-border:     var(--color-text-primary);
  --color-page-bg:        var(--color-bg);
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ===== Spagat (Photo background) ===== */
[data-theme="spagat"] {
  --font-heading: 'EB Garamond', 'Georgia', serif;
  --color-bg:             transparent;
  --color-bg-secondary:   transparent;
  --color-surface:        transparent;
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #444444;
  --color-text-muted:     #777777;
  --color-accent:         #1A1A1A;
  --color-accent-hover:   #333333;
  --color-border:         transparent;
  --color-header-bg:      transparent;
  --color-shadow:         none;
  --color-code-bg:        transparent;
  --color-switcher-bg:    transparent;
  --color-switcher-border:transparent;
  --color-card-alt:       transparent;
  --color-card-alt-text:  #1A1A1A;
  --color-sub-bg:         transparent;
  --color-sub-text:       #1A1A1A;
  --color-sub-border:     transparent;
  --color-page-bg:        transparent;
  --color-card-1:         transparent;
  --color-card-2:         transparent;
  --color-card-3:         transparent;
  --color-card-4:         transparent;
  --color-card-text-1:    #1A1A1A;
  --color-card-text-2:    #1A1A1A;
  --color-card-text-3:    #1A1A1A;
  --color-card-text-4:    #1A1A1A;
}

/* ===== SO/Vienna ===== */
[data-theme="acid"] {
  --font-heading: 'EB Garamond', 'Georgia', serif;
  --font-heading-weight: 400;
  --color-bg:             #E8DDD0;
  --color-bg-secondary:   #DDD0C0;
  --color-surface:        #F0E6DA;
  --color-text-primary:   #1A1210;
  --color-text-secondary: #2A2220;
  --color-text-muted:     #8A7E74;
  --color-accent:         #8B2500;
  --color-accent-hover:   #6E1D00;
  --color-border:         #1A1210;
  --color-header-bg:      rgba(232, 221, 208, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.08);
  --color-code-bg:        #DDD0C0;
  --color-switcher-bg:    #F0E6DA;
  --color-switcher-border:#1A1210;
  --color-card-alt:       #8B2500;
  --color-card-alt-text:  #F0E6DA;
  --color-sub-bg:         #8B2500;
  --color-sub-text:       #F0E6DA;
  --color-sub-border:     #F0E6DA;
  --color-page-bg:        transparent;
  --color-card-1:         transparent;
  --color-card-2:         transparent;
  --color-card-3:         transparent;
  --color-card-4:         transparent;
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}

/* ===== Essay (Magazine aesthetic — gradient via per-card colors) ===== */
[data-theme="essay"] {
  --font-heading: 'EB Garamond', 'Georgia', serif;
  --font-heading-weight: 400;
  --color-bg:             #f5f0eb;
  --color-bg-secondary:   #ede6df;
  --color-surface:        #faf6f1;
  --color-text-primary:   #121212;
  --color-text-secondary: #333333;
  --color-text-muted:     #888888;
  --color-accent:         #fe4400;
  --color-accent-hover:   #e03d00;
  --color-border:         #121212;
  --color-header-bg:      rgba(245, 240, 235, 0.88);
  --color-shadow:         rgba(0, 0, 0, 0.06);
  --color-code-bg:        #ede6df;
  --color-switcher-bg:    #faf6f1;
  --color-switcher-border:#121212;
  --color-card-alt:       #fe4400;
  --color-card-alt-text:  #f5f0eb;
  --color-sub-bg:         #f5f0eb;
  --color-sub-text:       #121212;
  --color-sub-border:     #121212;
  --color-page-bg:        #fe4400;
  --color-card-1:         var(--color-bg);
  --color-card-2:         var(--color-bg);
  --color-card-3:         var(--color-bg);
  --color-card-4:         var(--color-bg);
  --color-card-text-1:    var(--color-text-primary);
  --color-card-text-2:    var(--color-text-primary);
  --color-card-text-3:    var(--color-text-primary);
  --color-card-text-4:    var(--color-text-primary);
}