/* Kiyori theme layer — richer glass, sakura glow and distinct dark/light identities. */

/* ---------- DARK ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #07050d;
    --panel: rgba(19, 14, 30, .72);
    --line: rgba(255, 255, 255, .095);
    --muted: #91889f;
    --soft: #b9afc4;
    --purple: #aa8cff;
    --pink: #ef78c7;
    --blue: #7285ff;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(850px 600px at 84% -5%, rgba(177, 104, 255, .20), transparent 64%),
        radial-gradient(720px 520px at -8% 38%, rgba(92, 74, 255, .12), transparent 66%),
        radial-gradient(700px 500px at 58% 105%, rgba(239, 86, 177, .10), transparent 68%),
        linear-gradient(145deg, #07050d 0%, #0d0916 48%, #090711 100%);
}
:root[data-theme="dark"] body:before {
    background:
        radial-gradient(500px 420px at 72% 12%, rgba(191, 117, 255, .11), transparent 72%),
        radial-gradient(430px 360px at 16% 74%, rgba(91, 106, 255, .08), transparent 72%);
}
:root[data-theme="dark"] body:after {
    opacity: .28;
    background-image:
        linear-gradient(rgba(210, 179, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210, 179, 255, .035) 1px, transparent 1px);
    background-size: 72px 72px;
}
:root[data-theme="dark"] .navbar {
    background: linear-gradient(180deg, rgba(11, 7, 18, .90), rgba(11, 7, 18, .68));
    border-bottom-color: rgba(228, 196, 255, .10);
    box-shadow: 0 12px 45px rgba(0,0,0,.18);
}
:root[data-theme="dark"] .brand-mark {
    background: linear-gradient(145deg, #9b7aff, #ee72bf 72%, #ff9ad7);
    box-shadow: 0 10px 34px rgba(174, 111, 255, .30);
}
:root[data-theme="dark"] .desktop-nav a:hover,
:root[data-theme="dark"] .desktop-nav a.active { color: #fff; text-shadow: 0 0 18px rgba(236, 151, 220, .18); }
:root[data-theme="dark"] .button-primary {
    background: linear-gradient(135deg, #9573ff 0%, #c76de0 52%, #ef78c7 100%);
    box-shadow: 0 16px 38px rgba(166, 102, 255, .25), inset 0 1px rgba(255,255,255,.20);
}
:root[data-theme="dark"] .button-discord {
    box-shadow: 0 12px 34px rgba(88,101,242,.25), inset 0 1px rgba(255,255,255,.16);
}
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .rank-copy,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .server-card {
    background: linear-gradient(145deg, rgba(31,23,46,.72), rgba(12,9,20,.58));
    border-color: rgba(219, 187, 255, .105);
    box-shadow: 0 24px 60px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045);
}
:root[data-theme="dark"] .feature-card:hover,
:root[data-theme="dark"] .module-card:hover {
    border-color: rgba(206, 158, 255, .34);
    box-shadow: 0 28px 70px rgba(0,0,0,.30), 0 0 34px rgba(163,112,255,.08);
}
:root[data-theme="dark"] .kiyori-window {
    background: linear-gradient(145deg, rgba(39,29,58,.76), rgba(11,8,19,.68));
    border-color: rgba(235, 205, 255, .13);
    box-shadow: 0 45px 110px rgba(0,0,0,.56), 0 0 70px rgba(164,105,255,.08), inset 0 1px rgba(255,255,255,.08);
}
:root[data-theme="dark"] .message-card {
    background: linear-gradient(145deg, rgba(12,9,21,.50), rgba(43,28,59,.28));
    border-color: rgba(232,196,255,.09);
}
:root[data-theme="dark"] .floating-badge {
    background: rgba(13,9,23,.84);
    border-color: rgba(231,197,255,.14);
    box-shadow: 0 20px 45px rgba(0,0,0,.40), 0 0 25px rgba(174,110,255,.08);
}
:root[data-theme="dark"] .split-main {
    background: linear-gradient(145deg, rgba(31,23,46,.72), rgba(12,9,20,.55));
}
:root[data-theme="dark"] .split-accent {
    background:
        radial-gradient(circle at 75% 25%, rgba(194,133,255,.28), transparent 31%),
        radial-gradient(circle at 20% 85%, rgba(239,112,196,.14), transparent 32%),
        linear-gradient(145deg, #191126, #0c0913);
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f0eaf5;
    --panel: rgba(255, 250, 255, .66);
    --line: rgba(91, 65, 104, .15);
    --muted: #756879;
    --soft: #564958;
    --purple: #7959ca;
    --pink: #ca579e;
    --blue: #5e6dca;
}
:root[data-theme="light"] body {
    background:
        radial-gradient(850px 620px at 84% -8%, rgba(169, 124, 239, .25), transparent 64%),
        radial-gradient(760px 560px at -10% 36%, rgba(239, 133, 193, .17), transparent 66%),
        radial-gradient(700px 520px at 58% 105%, rgba(128, 118, 219, .11), transparent 68%),
        linear-gradient(145deg, #eee7f3 0%, #e9e0ee 47%, #f3e7ef 100%);
    color: #302634;
}
:root[data-theme="light"] body:before {
    background:
        radial-gradient(520px 420px at 72% 13%, rgba(153, 119, 226, .14), transparent 72%),
        radial-gradient(450px 380px at 18% 74%, rgba(225, 101, 170, .10), transparent 72%);
}
:root[data-theme="light"] body:after {
    opacity: .30;
    background-image:
        linear-gradient(rgba(102, 76, 115, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 76, 115, .045) 1px, transparent 1px);
    background-size: 72px 72px;
}
:root[data-theme="light"] .navbar {
    background: linear-gradient(180deg, rgba(247,241,249,.91), rgba(242,234,246,.73));
    border-bottom-color: rgba(91,65,104,.13);
    box-shadow: 0 12px 45px rgba(76,52,84,.10);
}
:root[data-theme="light"] .brand { color: #302634; }
:root[data-theme="light"] .brand-copy small { color: #897b8e; }
:root[data-theme="light"] .desktop-nav a { color: #837587; }
:root[data-theme="light"] .desktop-nav a:hover,
:root[data-theme="light"] .desktop-nav a.active { color: #3e3045; }
:root[data-theme="light"] .api-pill { color: #85778a; }
:root[data-theme="light"] .button-secondary,
:root[data-theme="light"] .button-soft,
:root[data-theme="light"] .nav-user {
    color: #554656;
    background: rgba(255,250,255,.56);
    border-color: rgba(91,65,104,.15);
    box-shadow: 0 9px 28px rgba(76,52,84,.07), inset 0 1px rgba(255,255,255,.72);
}
:root[data-theme="light"] .button-primary {
    background: linear-gradient(135deg, #795bd0, #b55cb0 55%, #d15fa6);
    box-shadow: 0 16px 36px rgba(120,82,190,.20), inset 0 1px rgba(255,255,255,.22);
}
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .section-heading h2,
:root[data-theme="light"] .split-main h2,
:root[data-theme="light"] .page-heading h1,
:root[data-theme="light"] .auth-card h1,
:root[data-theme="light"] .watch-hero h1 { color: #302634; }
:root[data-theme="light"] .hero h1 em,
:root[data-theme="light"] .auth-card h1 em,
:root[data-theme="light"] .watch-hero h1 em,
:root[data-theme="light"] .split-main h2 em {
    background: linear-gradient(90deg, #7656ca, #c44f9d, #d56cae);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
:root[data-theme="light"] .hero-lead,
:root[data-theme="light"] .section-heading p,
:root[data-theme="light"] .split-main p,
:root[data-theme="light"] .auth-card p,
:root[data-theme="light"] .page-heading p { color: #756879; }

/* Hero becomes a soft Kiyori studio rather than a white card. */
:root[data-theme="light"] .hero-visual.kiyori-hero {
    background:
        radial-gradient(circle at 50% 22%, rgba(161,126,230,.25), transparent 34%),
        radial-gradient(circle at 50% 88%, rgba(225,91,166,.20), transparent 43%),
        linear-gradient(145deg, rgba(229,220,238,.86), rgba(249,232,242,.78) 55%, rgba(224,220,236,.84));
    border-color: rgba(91,65,104,.16);
    box-shadow: inset 0 1px rgba(255,255,255,.78), 0 38px 95px rgba(76,52,84,.16);
}
:root[data-theme="light"] .kiyori-hero:before { background: radial-gradient(circle, rgba(145,109,219,.20), transparent 67%); }
:root[data-theme="light"] .kiyori-character { filter: drop-shadow(0 28px 32px rgba(67,48,78,.26)); }
:root[data-theme="light"] .kiyori-orbit { border-color: rgba(115,81,174,.22); }
:root[data-theme="light"] .kiyori-nameplate {
    background: linear-gradient(145deg, rgba(53,42,60,.88), rgba(65,46,67,.78));
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 18px 40px rgba(53,42,60,.20);
}
:root[data-theme="light"] .kiyori-nameplate strong { color: #fff; }
:root[data-theme="light"] .kiyori-nameplate span { color: #d4c6d5; }
:root[data-theme="light"] .kiyori-chip { background: rgba(112,76,173,.12); border-color: rgba(112,76,173,.22); color: #624793; }

:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .module-card,
:root[data-theme="light"] .rank-copy,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .server-card {
    background: linear-gradient(145deg, rgba(255,251,255,.76), rgba(228,219,235,.61));
    border-color: rgba(91,65,104,.14);
    box-shadow: 0 24px 60px rgba(76,52,84,.09), inset 0 1px rgba(255,255,255,.76);
}
:root[data-theme="light"] .feature-card:hover,
:root[data-theme="light"] .module-card:hover {
    border-color: rgba(121,89,202,.32);
    background: linear-gradient(145deg, rgba(255,252,255,.90), rgba(232,220,241,.72));
    box-shadow: 0 28px 65px rgba(76,52,84,.13), 0 0 30px rgba(154,112,222,.07);
}
:root[data-theme="light"] .feature-card h3,
:root[data-theme="light"] .module-card h3,
:root[data-theme="light"] .rank-copy h2 { color: #352a3b; }
:root[data-theme="light"] .feature-card p,
:root[data-theme="light"] .module-card p,
:root[data-theme="light"] .rank-copy p { color: #766a7b; }
:root[data-theme="light"] .feature-label,
:root[data-theme="light"] .feature-arrow,
:root[data-theme="light"] .rank-meta { color: #887a8d; }
:root[data-theme="light"] .split-card { border-color: rgba(91,65,104,.14); }
:root[data-theme="light"] .split-main { background: linear-gradient(145deg, rgba(255,251,255,.80), rgba(227,217,234,.62)); }
:root[data-theme="light"] .split-accent {
    background:
        radial-gradient(circle at 75% 25%, rgba(177,133,239,.27), transparent 32%),
        radial-gradient(circle at 20% 84%, rgba(222,99,172,.12), transparent 34%),
        linear-gradient(145deg, #e3d9ea, #f2e2ec);
}
:root[data-theme="light"] .big-k { color: rgba(111,77,176,.12); }
:root[data-theme="light"] .accent-copy strong { color: #3b2e40; }
:root[data-theme="light"] .accent-copy span,
:root[data-theme="light"] .split-accent small { color: #857687; }
:root[data-theme="light"] .rank-preview {
    background: radial-gradient(circle at 50% 15%, rgba(237,118,196,.15), transparent 45%), linear-gradient(145deg, rgba(255,251,255,.80), rgba(225,216,233,.63));
    border-color: rgba(91,65,104,.14);
}
:root[data-theme="light"] .rank-card-demo { box-shadow: 0 25px 55px rgba(73,51,82,.19); }
:root[data-theme="light"] .auth-icon { background: rgba(151,112,221,.11); border-color: rgba(121,89,202,.18); }
:root[data-theme="light"] .user-chip { background: rgba(255,251,255,.62); border-color: rgba(91,65,104,.14); color: #76697a; }
:root[data-theme="light"] .mobile-menu { background: rgba(248,240,250,.84); border-color: rgba(91,65,104,.14); color: #554656; }

/* ---------- THEME SWITCH ---------- */
/* Sits below the navbar instead of competing with the Discord login button. */
.kiyori-theme-toggle {
    position: fixed;
    z-index: 40;
    top: 91px;
    right: max(24px, calc((100vw - 1240px) / 2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(232,196,255,.14);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(25,18,38,.88), rgba(12,9,20,.78));
    color: #d8c9e5;
    font: inherit;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 24px rgba(173,111,255,.08), inset 0 1px rgba(255,255,255,.07);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.kiyori-theme-toggle:hover {
    transform: translateY(-2px) rotate(-2deg);
    border-color: rgba(239,120,199,.40);
    color: #ffe1f4;
    box-shadow: 0 15px 38px rgba(0,0,0,.30), 0 0 30px rgba(221,108,194,.13);
}
.kiyori-theme-toggle:active { transform: translateY(0) scale(.96); }
.kiyori-theme-toggle .theme-icon { font-size: 19px; line-height: 1; }
.kiyori-theme-toggle .theme-label { display: none; }
:root[data-theme="light"] .kiyori-theme-toggle {
    background: linear-gradient(145deg, rgba(67,50,74,.90), rgba(47,37,55,.82));
    color: #ffe9f7;
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 12px 32px rgba(76,52,84,.20), 0 0 24px rgba(193,93,160,.10), inset 0 1px rgba(255,255,255,.12);
}
:root[data-theme="light"] .kiyori-theme-toggle:hover { background: linear-gradient(145deg, rgba(78,58,86,.94), rgba(55,42,64,.88)); color: #fff; }

@media (max-width: 1100px) {
    .kiyori-theme-toggle { right: 22px; }
}
@media (max-width: 820px) {
    .kiyori-theme-toggle { top: 86px; right: 18px; width: 38px; height: 38px; border-radius: 13px; }
    .kiyori-theme-toggle .theme-icon { font-size: 17px; }
}
@media (max-width: 560px) {
    .kiyori-theme-toggle { top: 84px; right: 12px; width: 36px; height: 36px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .kiyori-theme-toggle { transition: none; }
}