/* ============================================================
   ORAKEL-THEMES — pro System ein eigener Mood (05.10.2026)
   Zoltan (zoltan-*) bleibt bewusst UNBERÜHRT — er ist die eine
   konstante Maschine ueber allen Systemen.

   Funktion: body[data-orakel="..."] oder .theme-<name> scopen die
   Farb-Variablen um. Default (kein Attribut) = Tarot-Look wie immer.
   ============================================================ */

/* --- RUNEN: kuehles Nordlicht, Blau/Eis, raue Kanten --- */
body[data-orakel="runen"],
.theme-runen {
    --color-bg: #0a1220;
    --color-bg-light: #101b2e;
    --color-bg-card: #16233c;
    --color-primary: #3d6a9e;
    --color-primary-glow: rgba(61, 106, 158, 0.4);
    --color-secondary: #1b2a44;
    --color-text: #e4eaf2;
    --color-text-muted: #8fa2ba;
    --color-gold: #7fb4d8;
    --color-gold-light: #b8dcf2;
    --color-silver: #a9bccf;
    --glow-gold: 0 0 20px rgba(127, 180, 216, 0.3);
    --glow-purple: 0 0 30px rgba(61, 106, 158, 0.2);
    --color-accent: #6fd3e8;
}

body[data-orakel="runen"] {
    background-image:
        radial-gradient(ellipse at top, rgba(61, 106, 158, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(111, 211, 232, 0.06) 0%, transparent 50%);
}

/* --- I-GING: chinesische Tusche, Zinnober-Akzent, warmes Papier --- */
body[data-orakel="iging"],
.theme-iging {
    --color-bg: #16100c;
    --color-bg-light: #201710;
    --color-bg-card: #2a1e15;
    --color-primary: #a8452a;
    --color-primary-glow: rgba(168, 69, 42, 0.4);
    --color-secondary: #33241a;
    --color-text: #ede4d8;
    --color-text-muted: #b0a190;
    --color-gold: #d8a05a;
    --color-gold-light: #f2cf96;
    --color-silver: #c9b8a4;
    --glow-gold: 0 0 20px rgba(216, 160, 90, 0.3);
    --glow-purple: 0 0 30px rgba(168, 69, 42, 0.2);
    --color-accent: #c8402a;
}

body[data-orakel="iging"] {
    background-image:
        radial-gradient(ellipse at top, rgba(168, 69, 42, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(216, 160, 90, 0.06) 0%, transparent 50%);
}

/* --- LENORMAND: Antik-Salon, warmes Bordeaux/Kupfer, gemütlich --- */
body[data-orakel="lenormand"],
.theme-lenormand {
    --color-bg: #180d10;
    --color-bg-light: #241317;
    --color-bg-card: #30191f;
    --color-primary: #9e3d52;
    --color-primary-glow: rgba(158, 61, 82, 0.4);
    --color-secondary: #3a1e25;
    --color-text: #f0e2dc;
    --color-text-muted: #b39a93;
    --color-gold: #cf9a5e;
    --color-gold-light: #ecc9a0;
    --color-silver: #cfb6ae;
    --glow-gold: 0 0 20px rgba(207, 154, 94, 0.3);
    --glow-purple: 0 0 30px rgba(158, 61, 82, 0.2);
    --color-accent: #b56a45;
}

body[data-orakel="lenormand"] {
    background-image:
        radial-gradient(ellipse at top, rgba(158, 61, 82, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(207, 154, 94, 0.06) 0%, transparent 50%);
}

/* --- MARSILLE: Sonne/Provence, warmes Ocker (Detailseiten) --- */
.theme-marseille {
    --color-bg: #1a1408;
    --color-bg-light: #261e0c;
    --color-bg-card: #332911;
    --color-primary: #9e7d2a;
    --color-primary-glow: rgba(158, 125, 42, 0.4);
    --color-secondary: #3d3113;
    --color-text: #f0ead8;
    --color-text-muted: #b3a784;
    --color-gold: #d8bc5a;
    --color-gold-light: #f2e3a0;
    --color-silver: #cfc49e;
    --glow-gold: 0 0 20px rgba(216, 188, 90, 0.3);
    --glow-purple: 0 0 30px rgba(158, 125, 42, 0.2);
    --color-accent: #c9982a;
}

/* --- THOTH: tiefes Aether-Violett, feierlich --- */
.theme-thoth {
    --color-bg: #120a1a;
    --color-bg-light: #1c1028;
    --color-bg-card: #281738;
    --color-primary: #7b2d8c;
    --color-primary-glow: rgba(123, 45, 140, 0.4);
    --color-secondary: #331f45;
    --color-text: #ece4f0;
    --color-text-muted: #a58fb3;
    --color-gold: #c9a2e0;
    --color-gold-light: #e6cef5;
    --color-silver: #bfb0cf;
    --glow-gold: 0 0 20px rgba(201, 162, 224, 0.3);
    --glow-purple: 0 0 30px rgba(123, 45, 140, 0.2);
    --color-accent: #8d5aa8;
}

/* --- RIDER-WAITE: klassisches Gelb/Blau der RWS-Edition --- */
.theme-waite {
    --color-bg: #0c1018;
    --color-bg-light: #141b28;
    --color-bg-card: #1d2738;
    --color-primary: #2d5c8c;
    --color-primary-glow: rgba(45, 92, 140, 0.4);
    --color-secondary: #22334a;
    --color-text: #e6eaf0;
    --color-text-muted: #93a3b8;
    --color-gold: #e0b84f;
    --color-gold-light: #f5da8c;
    --color-silver: #b5c1d0;
    --glow-gold: 0 0 20px rgba(224, 184, 79, 0.3);
    --glow-purple: 0 0 30px rgba(45, 92, 140, 0.2);
    --color-accent: #4a7ab5;
}

/* Sanfte Uebergaenge, wenn sich das Theme wechselt */
body {
    transition: background-color 0.6s ease, color 0.6s ease;
}

/* Theme-Hinweis ueber den Bereichen (nur wenn Theme aktiv) */
.theme-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.25);
}

.theme-badge::before {
    content: "◈";
    color: var(--color-accent, var(--color-gold));
}

/* --- Body-Attribute fuer Marseille / Thoth / Waite (05.10.2026) --- */
body[data-orakel="marseille"],
.theme-marseille {
    --color-bg: #1a1408;
    --color-bg-light: #261e0c;
    --color-bg-card: #332911;
    --color-primary: #9e7d2a;
    --color-primary-glow: rgba(158, 125, 42, 0.4);
    --color-secondary: #3d3113;
    --color-text: #f0ead8;
    --color-text-muted: #b3a784;
    --color-gold: #d8bc5a;
    --color-gold-light: #f2e3a0;
    --color-silver: #cfc49e;
    --glow-gold: 0 0 20px rgba(216, 188, 90, 0.3);
    --glow-purple: 0 0 30px rgba(158, 125, 42, 0.2);
    --color-accent: #c9982a;
    background-image:
        radial-gradient(ellipse at top, rgba(158, 125, 42, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(216, 188, 90, 0.06) 0%, transparent 50%);
}

body[data-orakel="thoth"],
.theme-thoth {
    --color-bg: #120a1a;
    --color-bg-light: #1c1028;
    --color-bg-card: #281738;
    --color-primary: #7b2d8c;
    --color-primary-glow: rgba(123, 45, 140, 0.4);
    --color-secondary: #331f45;
    --color-text: #ece4f0;
    --color-text-muted: #a58fb3;
    --color-gold: #c9a2e0;
    --color-gold-light: #e6cef5;
    --color-silver: #bfb0cf;
    --glow-gold: 0 0 20px rgba(201, 162, 224, 0.3);
    --glow-purple: 0 0 30px rgba(123, 45, 140, 0.2);
    --color-accent: #8d5aa8;
    background-image:
        radial-gradient(ellipse at top, rgba(123, 45, 140, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(201, 162, 224, 0.06) 0%, transparent 50%);
}

body[data-orakel="waite"],
.theme-waite {
    --color-bg: #0c1018;
    --color-bg-light: #141b28;
    --color-bg-card: #1d2738;
    --color-primary: #2d5c8c;
    --color-primary-glow: rgba(45, 92, 140, 0.4);
    --color-secondary: #22334a;
    --color-text: #e6eaf0;
    --color-text-muted: #93a3b8;
    --color-gold: #e0b84f;
    --color-gold-light: #f5da8c;
    --color-silver: #b5c1d0;
    --glow-gold: 0 0 20px rgba(224, 184, 79, 0.3);
    --glow-purple: 0 0 30px rgba(45, 92, 140, 0.2);
    --color-accent: #4a7ab5;
    background-image:
        radial-gradient(ellipse at top, rgba(45, 92, 140, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(224, 184, 79, 0.06) 0%, transparent 50%);
}

/* numerologie: neutral-mystisch (wie startseite, eigener akzent) */
body[data-orakel="numerologie"] {
    --color-accent: #7fb4d8;
}

/* --- FENG SHUI: Jade und Bambus, Gold-Akzent, ruhiges Gruen (05.10.2026) --- */
body[data-orakel="fengshui"],
.theme-fengshui {
    --color-bg: #0c1410;
    --color-bg-light: #122019;
    --color-bg-card: #16281f;
    --color-primary: #2f6e4f;
    --color-primary-glow: rgba(47, 110, 79, 0.4);
    --color-secondary: #1d3529;
    --color-text: #e6efe8;
    --color-text-muted: #9ab5a5;
    --color-gold: #d4a944;
    --color-gold-light: #f0d78c;
    --color-silver: #c2d4c8;
    --glow-gold: 0 0 20px rgba(212, 169, 68, 0.3);
    --glow-purple: 0 0 30px rgba(47, 110, 79, 0.2);
    --color-accent: #6fbf8f;
}

body[data-orakel="fengshui"] {
    background-image:
        radial-gradient(ellipse at top, rgba(47, 110, 79, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(212, 169, 68, 0.05) 0%, transparent 50%);
}