/* blood.bid — profile themes.
   Loads after profile-2.css / profile-3.css on profile pages.

   Every page component reads --p-* tokens defined on .profile-body (the
   blood default lives there). A theme is therefore just a palette: pick a
   body.theme-* class, redefine the tokens, and the whole page re-skins.
   Themes intentionally reuse that single token contract instead of forking
   component CSS — adding a theme = adding one block of colors, nothing else.

   Quality over quantity: six skins, each treated as a finished design,
   starting from the blood baseline that every username ships with.
*/

/* ---------- chrome shared by the light themes ---------- */
body.theme-paper .badge-chip,
body.theme-brutalist .badge-chip {
    border-color: var(--p-line-accent);
    background: var(--p-accent-faint);
    color: var(--p-accent-deep);
}
body.theme-paper .follow-btn.is-following,
body.theme-brutalist .follow-btn.is-following {
    color: var(--p-ink);
    background: var(--p-item-bg);
}
body.theme-paper .profile-stats .stat-social,
body.theme-brutalist .profile-stats .stat-social {
    color: var(--p-muted);
}
body.theme-paper .profile-stats .stat-social:hover,
body.theme-paper .profile-stats .stat-social:hover strong,
body.theme-brutalist .profile-stats .stat-social:hover,
body.theme-brutalist .profile-stats .stat-social:hover strong {
    color: var(--p-accent);
}

/* The light skins flip the whole frame to daylight: text that still reads the
   site-wide dark tokens (handle literal, footer, editor labels, navbar pills,
   legal links) is re-pointed at the theme's own ink so nothing renders as
   pale-on-pale. */
body.theme-paper,
body.theme-brutalist {
    --foreground: var(--p-ink);
    --muted-foreground: var(--p-muted);
    --border-blood: var(--p-line-accent);
    background-color: var(--p-body-bg);
    background-image: var(--p-body-image);
    color-scheme: light;
}
body.theme-paper .display,
body.theme-brutalist .display {
    color: var(--p-ink);
}
body.theme-paper .display em,
body.theme-brutalist .display em {
    text-shadow: none;
}

/* ---------- theme: void — pure black, silvered, monochrome ---------- */
body.theme-void {
    --p-body-bg: #000000;
    --p-body-image: radial-gradient(1000px 420px at 50% -12%, rgba(255, 255, 255, .05), transparent 60%);
    --p-ink: #ededed;
    --p-muted: #8f8f8f;
    --p-line: rgba(255, 255, 255, .10);
    --p-line-accent: rgba(255, 255, 255, .20);
    --p-accent: #e8e8e8;
    --p-accent-deep: #b4b4b4;
    --p-accent-dark: #3a3a3a;
    --p-accent-glow: rgba(255, 255, 255, .16);
    --p-accent-text: #050505;
    --p-accent-soft: rgba(255, 255, 255, .35);
    --p-accent-faint: rgba(255, 255, 255, .08);
    --p-accent-halo: rgba(255, 255, 255, .06);
    --p-avatar-bg: linear-gradient(160deg, #1d1d1d, #000);
    --p-avatar-border: rgba(255, 255, 255, .24);
    --p-avatar-ring: 0 0 0 6px rgba(255, 255, 255, .05);
    --p-avatar-shadow: 0 14px 44px rgba(0, 0, 0, .85);
    --p-avatar-initial: #f4f4f4;
    --p-icon-bg: rgba(255, 255, 255, .05);
    --p-input-bg: rgba(255, 255, 255, .05);
    --p-btn-bg: rgba(255, 255, 255, .07);
    --p-item-bg: rgba(255, 255, 255, .03);
    --p-item-line: rgba(255, 255, 255, .09);
    --p-link-bg: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .30));
    --p-link-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .24));
    --p-music-bg: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .30));
    --p-music-cover-bg: rgba(255, 255, 255, .06);
    --p-editor-bg: rgba(7, 7, 7, .88);
    --p-danger: #ffb4b4;
    --p-scanline: rgba(255, 255, 255, .06);
    --p-banner-scrim-1: rgba(0, 0, 0, .80);
    --p-banner-scrim-2: rgba(0, 0, 0, .92);
}

/* ---------- theme: glass — deep dusk, frosted panels, cool light ---------- */
body.theme-glass {
    --p-body-bg: #060a12;
    --p-body-image:
        radial-gradient(1100px 480px at 50% -12%, rgba(90, 130, 200, .13), transparent 60%),
        radial-gradient(800px 380px at 100% 100%, rgba(60, 90, 160, .08), transparent 60%);
    --p-ink: #e8eef7;
    --p-muted: #8b99ad;
    --p-line: rgba(160, 190, 235, .14);
    --p-line-accent: rgba(150, 190, 255, .30);
    --p-accent: #8fb5ff;
    --p-accent-deep: #5f86ff;
    --p-accent-dark: #22365e;
    --p-accent-glow: rgba(120, 160, 255, .18);
    --p-accent-text: #04101f;
    --p-accent-soft: rgba(143, 181, 255, .40);
    --p-accent-faint: rgba(143, 181, 255, .10);
    --p-accent-halo: rgba(150, 190, 255, .12);
    --p-avatar-bg: radial-gradient(circle at 30% 20%, rgba(120, 160, 255, .30), rgba(2, 6, 14, .85));
    --p-avatar-border: rgba(160, 195, 245, .35);
    --p-avatar-ring: 0 0 0 6px rgba(150, 190, 255, .08);
    --p-avatar-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    --p-avatar-initial: #dbe7ff;
    --p-icon-bg: rgba(255, 255, 255, .05);
    --p-input-bg: rgba(255, 255, 255, .06);
    --p-btn-bg: rgba(255, 255, 255, .07);
    --p-item-bg: rgba(255, 255, 255, .035);
    --p-item-line: rgba(200, 220, 255, .11);
    --p-link-bg: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    --p-link-hover-bg: linear-gradient(180deg, rgba(143, 181, 255, .14), rgba(255, 255, 255, .03));
    --p-music-bg: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    --p-music-cover-bg: rgba(120, 160, 255, .15);
    --p-editor-bg: rgba(9, 14, 24, .86);
    --p-danger: #ffb0b0;
    --p-scanline: rgba(143, 181, 255, .08);
    --p-banner-scrim-1: rgba(6, 10, 18, .82);
    --p-banner-scrim-2: rgba(4, 7, 13, .94);
}
body.theme-glass .profile-link {
    backdrop-filter: blur(10px) saturate(1.12);
}
body.theme-glass .music-bar {
    backdrop-filter: blur(16px) saturate(1.15);
}

/* ---------- theme: brutalist — paper daylight, hard edges, hard shadows ---------- */
body.theme-brutalist {
    --p-body-bg: #f1efe8;
    --p-body-image: none;
    --p-ink: #0f0f0d;
    --p-muted: #5b5b55;
    --p-line: rgba(15, 15, 13, .55);
    --p-line-accent: rgba(15, 15, 13, .9);
    --p-accent: #c92c1d;
    --p-accent-deep: #9c1e11;
    --p-accent-dark: #3d0c07;
    --p-accent-glow: rgba(201, 44, 29, .25);
    --p-accent-text: #fff;
    --p-accent-soft: rgba(201, 44, 29, .35);
    --p-accent-faint: rgba(201, 44, 29, .10);
    --p-accent-halo: rgba(15, 15, 13, .08);
    --p-avatar-bg: #f1efe8;
    --p-avatar-border: rgba(15, 15, 13, 1);
    --p-avatar-ring: 0 0 0 6px #f1efe8;
    --p-avatar-shadow: 6px 6px 0 rgba(15, 15, 13, .9);
    --p-avatar-initial: #c92c1d;
    --p-icon-bg: rgba(15, 15, 13, .07);
    --p-input-bg: #fff;
    --p-btn-bg: #fff;
    --p-item-bg: #fff;
    --p-item-line: rgba(15, 15, 13, .5);
    --p-link-bg: #fff;
    --p-link-hover-bg: #ffe9e4;
    --p-music-bg: #fff;
    --p-music-cover-bg: rgba(201, 44, 29, .12);
    --p-editor-bg: #f1efe8;
    --p-danger: #a3241b;
    --p-scanline: rgba(15, 15, 13, .14);
    --p-radius-sm: 0px;
    --p-radius-md: 0px;
    --p-radius-lg: 0px;
    --p-shadow: 4px 4px 0 rgba(15, 15, 13, .7);
    --p-banner-scrim-1: rgba(241, 239, 232, .85);
    --p-banner-scrim-2: rgba(241, 239, 232, .96);
}
body.theme-brutalist .profile-avatar-img,
body.theme-brutalist .profile-avatar {
    border-radius: 0;
    border-width: 2px;
}
body.theme-brutalist .profile-avatar-wrap {
    border-radius: 0;
}
body.theme-brutalist .profile-link {
    border-width: 2px;
    box-shadow: 4px 4px 0 rgba(15, 15, 13, .75);
    font-weight: 600;
}
body.theme-brutalist .profile-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 rgba(15, 15, 13, .75);
    border-color: var(--p-line-accent);
}
body.theme-brutalist .profile-link-icon { border-radius: 0; }
body.theme-brutalist .music-bar { border-width: 2px; }
body.theme-brutalist .music-play { border-radius: 0; }
body.theme-brutalist .profile-handle {
    text-transform: uppercase;
    letter-spacing: .02em;
}
body.theme-brutalist .profile-sub {
    font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
}
body.theme-brutalist .edit-toggle,
body.theme-brutalist .badge-chip,
body.theme-brutalist .follow-btn {
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(15, 15, 13, .6);
}

/* ---------- theme: paper — warm stock, terracotta ink, editorial air ---------- */
body.theme-paper {
    --p-body-bg: #f5f1e8;
    --p-body-image: radial-gradient(1000px 420px at 50% -10%, rgba(156, 74, 47, .05), transparent 60%);
    --p-ink: #29211a;
    --p-muted: #8d8070;
    --p-line: rgba(70, 48, 28, .16);
    --p-line-accent: rgba(156, 74, 47, .35);
    --p-accent: #9c4a2f;
    --p-accent-deep: #7d3823;
    --p-accent-dark: #4a2216;
    --p-accent-glow: rgba(156, 74, 47, .22);
    --p-accent-text: #fff;
    --p-accent-soft: rgba(156, 74, 47, .30);
    --p-accent-faint: rgba(156, 74, 47, .09);
    --p-accent-halo: rgba(156, 74, 47, .08);
    --p-avatar-bg: #fffdf7;
    --p-avatar-border: rgba(41, 33, 26, .16);
    --p-avatar-ring: 0 0 0 6px rgba(41, 33, 26, .05);
    --p-avatar-shadow: 0 10px 34px rgba(41, 33, 26, .18);
    --p-avatar-initial: #9c4a2f;
    --p-icon-bg: rgba(41, 33, 26, .06);
    --p-input-bg: #fffdf7;
    --p-btn-bg: #fffdf7;
    --p-item-bg: rgba(41, 33, 26, .03);
    --p-item-line: rgba(70, 48, 28, .14);
    --p-link-bg: #fffdf7;
    --p-link-hover-bg: rgba(156, 74, 47, .06);
    --p-music-bg: #fffdf7;
    --p-music-cover-bg: rgba(156, 74, 47, .10);
    --p-editor-bg: #faf6ed;
    --p-danger: #a3241b;
    --p-scanline: rgba(156, 74, 47, .08);
    --p-radius-sm: 10px;
    --p-radius-md: 14px;
    --p-radius-lg: 18px;
    --p-shadow: 0 1px 2px rgba(41, 33, 26, .06), 0 8px 24px rgba(41, 33, 26, .08);
    --p-banner-scrim-1: rgba(245, 241, 232, .86);
    --p-banner-scrim-2: rgba(245, 241, 232, .96);
}
body.theme-paper .profile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(41, 33, 26, .12);
}

/* ---------- theme: gothic — deep dark luxury, gilt edges, bone light ---------- */
body.theme-gothic {
    --p-body-bg: #0b0806;
    --p-body-image:
        radial-gradient(1100px 480px at 50% -12%, rgba(201, 168, 106, .10), transparent 60%),
        radial-gradient(900px 420px at 100% 100%, rgba(60, 30, 10, .10), transparent 60%);
    --p-ink: #ece1d2;
    --p-muted: #94846d;
    --p-line: rgba(201, 168, 106, .18);
    --p-line-accent: rgba(201, 168, 106, .42);
    --p-accent: #c9a86a;
    --p-accent-deep: #a8873f;
    --p-accent-dark: #4a3a1c;
    --p-accent-glow: rgba(201, 168, 106, .20);
    --p-accent-text: #120d05;
    --p-accent-soft: rgba(201, 168, 106, .40);
    --p-accent-faint: rgba(201, 168, 106, .10);
    --p-accent-halo: rgba(201, 168, 106, .12);
    --p-avatar-bg: radial-gradient(circle at 30% 20%, rgba(201, 168, 106, .30), rgba(20, 12, 6, .9));
    --p-avatar-border: rgba(201, 168, 106, .45);
    --p-avatar-ring: 0 0 0 6px rgba(201, 168, 106, .10);
    --p-avatar-shadow: 0 14px 46px rgba(0, 0, 0, .7);
    --p-avatar-initial: #f2e3c4;
    --p-icon-bg: rgba(201, 168, 106, .07);
    --p-input-bg: rgba(201, 168, 106, .06);
    --p-btn-bg: rgba(201, 168, 106, .08);
    --p-item-bg: rgba(201, 168, 106, .04);
    --p-item-line: rgba(201, 168, 106, .16);
    --p-link-bg: linear-gradient(180deg, rgba(201, 168, 106, .05), rgba(0, 0, 0, .22));
    --p-link-hover-bg: linear-gradient(180deg, rgba(201, 168, 106, .14), rgba(0, 0, 0, .18));
    --p-music-bg: linear-gradient(180deg, rgba(201, 168, 106, .05), rgba(0, 0, 0, .28));
    --p-music-cover-bg: rgba(201, 168, 106, .16);
    --p-editor-bg: rgba(14, 10, 7, .88);
    --p-danger: #ffc9a8;
    --p-scanline: rgba(201, 168, 106, .08);
    --p-shadow: 0 10px 32px rgba(0, 0, 0, .5);
    --p-banner-scrim-1: rgba(11, 8, 6, .82);
    --p-banner-scrim-2: rgba(8, 5, 4, .94);
}
body.theme-gothic .profile-handle { letter-spacing: .02em; }
body.theme-gothic .badge-chip {
    border-color: rgba(201, 168, 106, .45);
    background: rgba(201, 168, 106, .12);
    color: #f2e3c4;
}

/* ---------- accessibility: visible focus, reduced motion ---------- */
.profile-body a:focus-visible,
.profile-body button:focus-visible,
.profile-body input:focus-visible,
.profile-body select:focus-visible,
.profile-body textarea:focus-visible,
.profile-body .profile-link:focus-visible,
.profile-body .stat:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .profile-body *,
    .profile-body *::before,
    .profile-body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .profile-body .music-bar.is-playing .music-cover { animation: none !important; }
}