/* ==========================================================
   MOOD THEME — load AFTER style.css
   Driven by <html data-mood="1..10"> (weekly average of the cycle).
   10 = 90-100%  radiant gold sunrise
    1 = 0-10%    fresh mint "new start"
   Every level is bright and positive. Score colours (red/amber/green)
   are NOT touched: they keep their own variables in style.css.
   ========================================================== */

@property --mood-a    { syntax: '<color>'; inherits: true; initial-value: #FFB547; }
@property --mood-b    { syntax: '<color>'; inherits: true; initial-value: #FF8A5B; }
@property --mood-glow { syntax: '<color>'; inherits: true; initial-value: rgba(255, 181, 71, 0.30); }

:root {
    /* Default = level 10, so a brand-new user sees the most positive look */
    --mood-a: #FFB547;
    --mood-b: #FF8A5B;
    --mood-glow: rgba(255, 181, 71, 0.30);

    /* Re-point the existing "gold" tokens at the mood colours */
    --gold: var(--mood-a);
    --gold-deep: var(--mood-b);
    --grad-gold: linear-gradient(135deg, var(--mood-a), var(--mood-b));

    transition: --mood-a 1.6s ease, --mood-b 1.6s ease, --mood-glow 1.6s ease;
}

/* Richer base: deep navy instead of pure black, with every surface
   tinted slightly by the current mood so the whole site feels coloured */
:root {
    --bg: #0A0D1C;
    --sidebar: color-mix(in srgb, var(--mood-a) 6%, #0A0D1C);
    --surface: color-mix(in srgb, var(--mood-a) 7%, #111833);
    --raised: color-mix(in srgb, var(--mood-a) 8%, #19213E);
    --hover: color-mix(in srgb, var(--mood-a) 12%, #1F2950);
    --border: color-mix(in srgb, var(--mood-a) 16%, #1E2846);
    --border-hover: color-mix(in srgb, var(--mood-a) 30%, #33466B);
}

/* Stronger background glow that follows the mood */
body {
    background:
        radial-gradient(1200px 720px at 8% -10%, color-mix(in srgb, var(--mood-a) 30%, transparent), transparent 65%),
        radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--mood-b) 24%, transparent), transparent 62%),
        radial-gradient(700px 480px at 95% 0%, color-mix(in srgb, var(--mood-b) 14%, transparent), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

.site-header { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.philosophy { background: linear-gradient(180deg, var(--sidebar), var(--bg)); }

/* Hard-coded gold glows in style.css, now following the mood */
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); color: #fff; }

.button-primary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                0 8px 24px color-mix(in srgb, var(--gold) 25%, transparent);
}
.button-primary:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                0 12px 32px color-mix(in srgb, var(--gold) 38%, transparent);
}

.setup-prompt {
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent), var(--surface));
}

.companion-message {
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), rgba(91, 124, 250, 0.08)), var(--surface);
    border-color: color-mix(in srgb, var(--gold) 25%, transparent);
}
p.companion-message { border-color: rgba(143, 168, 255, 0.25); }

.metric-option:has(input:checked) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, transparent), rgba(91, 124, 250, 0.08));
    border-color: color-mix(in srgb, var(--gold) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent),
                0 8px 22px color-mix(in srgb, var(--gold) 10%, transparent);
}

.daily-result {
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
    background: radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 65%), var(--surface);
}

.number-line-input::-webkit-slider-thumb { box-shadow: 0 2px 12px color-mix(in srgb, var(--gold) 55%, transparent); }
.number-line-input::-moz-range-thumb     { box-shadow: 0 2px 12px color-mix(in srgb, var(--gold) 55%, transparent); }

/* ---------- The 10 moods ---------- */
/* 10 = 90-100%  radiant gold sunrise */
:root[data-mood="10"] { --mood-a: #FFB547; --mood-b: #FF8A5B; --mood-glow: rgba(255, 181, 71, 0.30); }
/* 9 = 80-90%  warm amber-orange */
:root[data-mood="9"]  { --mood-a: #FFA94D; --mood-b: #FF7A59; --mood-glow: rgba(255, 150, 80, 0.28); }
/* 8 = 70-80%  coral */
:root[data-mood="8"]  { --mood-a: #FF8A6B; --mood-b: #FF6B8A; --mood-glow: rgba(255, 120, 110, 0.26); }
/* 7 = 60-70%  rose */
:root[data-mood="7"]  { --mood-a: #FF7AA8; --mood-b: #E879F9; --mood-glow: rgba(255, 107, 157, 0.25); }
/* 6 = 50-60%  orchid */
:root[data-mood="6"]  { --mood-a: #C084FC; --mood-b: #F472B6; --mood-glow: rgba(192, 132, 252, 0.25); }
/* 5 = 40-50%  violet */
:root[data-mood="5"]  { --mood-a: #A78BFA; --mood-b: #818CF8; --mood-glow: rgba(167, 139, 250, 0.25); }
/* 4 = 30-40%  indigo-blue */
:root[data-mood="4"]  { --mood-a: #818CF8; --mood-b: #60A5FA; --mood-glow: rgba(129, 140, 248, 0.24); }
/* 3 = 20-30%  sky */
:root[data-mood="3"]  { --mood-a: #60A5FA; --mood-b: #38BDF8; --mood-glow: rgba(56, 189, 248, 0.23); }
/* 2 = 10-20%  teal */
:root[data-mood="2"]  { --mood-a: #38BDF8; --mood-b: #2DD4BF; --mood-glow: rgba(45, 212, 191, 0.23); }
/* 1 = 0-10%  fresh mint, a clean new start */
:root[data-mood="1"]  { --mood-a: #2DD4BF; --mood-b: #4ADE80; --mood-glow: rgba(74, 222, 128, 0.23); }