/**
 * Style Studio cosmetics: themes, avatar frames, tier badges.
 *
 * THEMES
 * The app's Tailwind build resolves every emerald-* utility through the
 * --hh-accent-* variables below (see app/tailwind.config.cjs), and the card
 * surface classes (.bg-[#0F1729] family) are overridden here to read
 * --hh-surface. The :root defaults reproduce stock emerald + #0F1729 exactly,
 * so no data-hh-theme attribute == the classic look, byte for byte.
 * Theme keys are owned by web/config/CosmeticsService.php.
 *
 * This file is loaded AFTER the Tailwind build artifact; the surface
 * overrides below rely on that order to win the cascade.
 */

:root {
    /* Classic Emerald (default): stock Tailwind emerald, RGB triplets */
    --hh-accent-50: 236 253 245;
    --hh-accent-100: 209 250 229;
    --hh-accent-200: 167 243 208;
    --hh-accent-300: 110 231 183;
    --hh-accent-400: 52 211 153;
    --hh-accent-500: 16 185 129;
    --hh-accent-600: 5 150 105;
    --hh-accent-700: 4 120 87;
    --hh-accent-800: 6 95 70;
    --hh-accent-900: 6 78 59;
    --hh-accent-950: 2 44 34;
    /* Card surface: #0F1729 */
    --hh-surface: 15 23 41;
}

/* Ocean (Builder+): Tailwind sky */
body[data-hh-theme="ocean"] {
    --hh-accent-50: 240 249 255;
    --hh-accent-100: 224 242 254;
    --hh-accent-200: 186 230 253;
    --hh-accent-300: 125 211 252;
    --hh-accent-400: 56 189 248;
    --hh-accent-500: 14 165 233;
    --hh-accent-600: 2 132 199;
    --hh-accent-700: 3 105 161;
    --hh-accent-800: 7 89 133;
    --hh-accent-900: 12 74 110;
    --hh-accent-950: 8 47 73;
    --hh-surface: 12 25 45;
}

/* Sunset (Builder+): Tailwind orange */
body[data-hh-theme="sunset"] {
    --hh-accent-50: 255 247 237;
    --hh-accent-100: 255 237 213;
    --hh-accent-200: 254 215 170;
    --hh-accent-300: 253 186 116;
    --hh-accent-400: 251 146 60;
    --hh-accent-500: 249 115 22;
    --hh-accent-600: 234 88 12;
    --hh-accent-700: 194 65 12;
    --hh-accent-800: 154 52 18;
    --hh-accent-900: 124 45 18;
    --hh-accent-950: 67 20 7;
    --hh-surface: 30 20 12;
}

/* Orchid (Builder+): Tailwind violet */
body[data-hh-theme="orchid"] {
    --hh-accent-50: 245 243 255;
    --hh-accent-100: 237 233 254;
    --hh-accent-200: 221 214 254;
    --hh-accent-300: 196 181 253;
    --hh-accent-400: 167 139 250;
    --hh-accent-500: 139 92 246;
    --hh-accent-600: 124 58 237;
    --hh-accent-700: 109 40 217;
    --hh-accent-800: 91 33 182;
    --hh-accent-900: 76 29 149;
    --hh-accent-950: 46 16 101;
    --hh-surface: 23 16 41;
}

/* Rose (Builder+): Tailwind pink */
body[data-hh-theme="rose"] {
    --hh-accent-50: 253 242 248;
    --hh-accent-100: 252 231 243;
    --hh-accent-200: 251 207 232;
    --hh-accent-300: 249 168 212;
    --hh-accent-400: 244 114 182;
    --hh-accent-500: 236 72 153;
    --hh-accent-600: 219 39 119;
    --hh-accent-700: 190 24 93;
    --hh-accent-800: 157 23 77;
    --hh-accent-900: 131 24 67;
    --hh-accent-950: 80 7 36;
    --hh-surface: 30 15 33;
}

/* Aurora (Leader+): Tailwind cyan */
body[data-hh-theme="aurora"] {
    --hh-accent-50: 236 254 255;
    --hh-accent-100: 207 250 254;
    --hh-accent-200: 165 243 252;
    --hh-accent-300: 103 232 249;
    --hh-accent-400: 34 211 238;
    --hh-accent-500: 6 182 212;
    --hh-accent-600: 8 145 178;
    --hh-accent-700: 14 116 144;
    --hh-accent-800: 21 94 117;
    --hh-accent-900: 22 78 99;
    --hh-accent-950: 8 51 68;
    --hh-surface: 10 26 38;
}

/* Nebula (Leader+): Tailwind fuchsia */
body[data-hh-theme="nebula"] {
    --hh-accent-50: 253 244 255;
    --hh-accent-100: 250 232 255;
    --hh-accent-200: 245 208 254;
    --hh-accent-300: 240 171 252;
    --hh-accent-400: 232 121 249;
    --hh-accent-500: 217 70 239;
    --hh-accent-600: 192 38 211;
    --hh-accent-700: 162 28 175;
    --hh-accent-800: 134 25 143;
    --hh-accent-900: 112 26 117;
    --hh-accent-950: 74 4 78;
    --hh-surface: 30 13 38;
}

/* Champion Gold (Champion): Tailwind amber */
body[data-hh-theme="gold"] {
    --hh-accent-50: 255 251 235;
    --hh-accent-100: 254 243 199;
    --hh-accent-200: 253 230 138;
    --hh-accent-300: 252 211 77;
    --hh-accent-400: 251 191 36;
    --hh-accent-500: 245 158 11;
    --hh-accent-600: 217 119 6;
    --hh-accent-700: 180 83 9;
    --hh-accent-800: 146 64 14;
    --hh-accent-900: 120 53 15;
    --hh-accent-950: 69 26 3;
    --hh-surface: 32 22 8;
}

/* Card surface family: same output as the Tailwind arbitrary-value classes
   when --hh-surface is the default #0F1729, themeable otherwise. */
.bg-\[\#0F1729\] { background-color: rgb(var(--hh-surface)); }
.bg-\[\#0F1729\]\/60 { background-color: rgb(var(--hh-surface) / 0.6); }
.bg-\[\#0F1729\]\/80 { background-color: rgb(var(--hh-surface) / 0.8); }
.bg-\[\#0F1729\]\/90 { background-color: rgb(var(--hh-surface) / 0.9); }
.bg-\[\#0F1729\]\/95 { background-color: rgb(var(--hh-surface) / 0.95); }

/**
 * CHECKIN CARD BACKGROUNDS
 * Tinted gradients behind a user's own checkins in the feed. Deliberately
 * STATIC (no animation): a feed can render dozens at once and these must be
 * free on low-end phones. Same luminance family as the classic #0F1729/80
 * card so text contrast is unchanged. Both rules per style: the base class
 * must also beat the card's hover:bg-[#0F1729] state.
 */
.hh-ckbg-midnight,
.hh-ckbg-midnight:hover {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.45) 0%, rgba(15, 23, 41, 0.85) 55%) , rgb(13 18 38 / 0.9);
}
.hh-ckbg-tide,
.hh-ckbg-tide:hover {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.35) 0%, rgba(15, 23, 41, 0.85) 55%), rgb(10 26 38 / 0.9);
}
.hh-ckbg-ember,
.hh-ckbg-ember:hover {
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.35) 0%, rgba(15, 23, 41, 0.85) 55%), rgb(30 20 12 / 0.9);
}
.hh-ckbg-royal,
.hh-ckbg-royal:hover {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.4) 0%, rgba(15, 23, 41, 0.85) 55%), rgb(23 16 41 / 0.9);
}
.hh-ckbg-gilded,
.hh-ckbg-gilded:hover {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.42) 0%, rgba(15, 23, 41, 0.85) 50%, rgba(120, 53, 15, 0.25) 100%), rgb(32 22 8 / 0.9);
    border-color: rgba(251, 191, 36, 0.25) !important;
}

/**
 * AVATAR FRAMES
 * Rendered by CosmeticsService::avatar(): the <img> keeps its existing size
 * classes; the wrapper draws the ring behind it. Animated rings spin a
 * conic-gradient ::before (circular, so the rotation is seamless).
 */
.hh-frame {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 9999px;
    padding: 2px;
    vertical-align: middle;
}
.hh-frame-thick { padding: 3px; }
.hh-frame > img {
    position: relative;
    z-index: 1;
    display: block;
}
.hh-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 9999px;
}

/* Builder rings: solid gems + brushed bronze */
.hh-frame-emerald-ring::before { background: #10b981; }
.hh-frame-sapphire-ring::before { background: #3b82f6; }
.hh-frame-amethyst-ring::before { background: #8b5cf6; }
.hh-frame-bronze-ring::before {
    background: linear-gradient(135deg, #d97706, #92400e 45%, #f59e0b 70%, #78350f);
}

/* Leader rings: animated metals and lights */
.hh-frame-silver-ring::before {
    background: conic-gradient(from 0deg, #9ca3af, #f3f4f6, #6b7280, #e5e7eb, #9ca3af);
    animation: hh-frame-spin 6s linear infinite;
}
.hh-frame-aurora-ring::before {
    background: conic-gradient(from 0deg, #34d399, #22d3ee, #818cf8, #e879f9, #34d399);
    animation: hh-frame-spin 4s linear infinite;
}

/* Champion ring: spinning gold + glow */
.hh-frame-gold-ring::before {
    background: conic-gradient(from 0deg, #f59e0b, #fde68a, #b45309, #fcd34d, #f59e0b);
    animation: hh-frame-spin 3s linear infinite;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

@keyframes hh-frame-spin {
    to { transform: rotate(360deg); }
}

/**
 * PROFILE FLAIR
 * Animated overlays on the profile header (and the Style Studio preview
 * tiles), Discord profile-effect style. Applied as hh-pfx hh-pfx-{key};
 * content stays readable because children are lifted above the ::before /
 * ::after overlay layers.
 */
.hh-pfx {
    position: relative;
    overflow: hidden;
}
.hh-pfx > * {
    position: relative;
    z-index: 1;
}
.hh-pfx::before,
.hh-pfx::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Starfall: two parallax layers of drifting, twinkling stars */
.hh-pfx-starfall::before {
    background-image:
        radial-gradient(1.5px 1.5px at 25% 20%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(1px 1px at 70% 45%, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 45% 70%, rgba(191, 219, 254, 0.8), transparent 60%),
        radial-gradient(1px 1px at 90% 15%, rgba(255, 255, 255, 0.6), transparent 60%);
    background-size: 220px 200px;
    animation: hh-pfx-fall 16s linear infinite;
}
.hh-pfx-starfall::after {
    background-image:
        radial-gradient(1px 1px at 10% 55%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1px 1px at 55% 30%, rgba(199, 210, 254, 0.6), transparent 60%),
        radial-gradient(1px 1px at 80% 80%, rgba(255, 255, 255, 0.45), transparent 60%);
    background-size: 160px 150px;
    animation: hh-pfx-fall 26s linear infinite;
}
@keyframes hh-pfx-fall {
    to { background-position: 0 200px; }
}

/* Aurora Veil: slow drifting teal-violet light sheets */
.hh-pfx-aurora-veil::before {
    background:
        radial-gradient(60% 120% at 20% 0%, rgba(45, 212, 191, 0.28), transparent 60%),
        radial-gradient(50% 110% at 75% 10%, rgba(167, 139, 250, 0.26), transparent 60%),
        radial-gradient(45% 100% at 50% 0%, rgba(34, 211, 238, 0.18), transparent 65%);
    background-size: 300% 100%;
    animation: hh-pfx-drift 12s ease-in-out infinite alternate;
    filter: blur(6px);
}
@keyframes hh-pfx-drift {
    from { background-position: 0% 0; }
    to { background-position: 100% 0; }
}

/* Rising Embers: warm floor glow + embers floating upward */
.hh-pfx-ember-rise::before {
    background: radial-gradient(120% 60% at 50% 110%, rgba(249, 115, 22, 0.28), transparent 65%);
}
.hh-pfx-ember-rise::after {
    background-image:
        radial-gradient(2px 2px at 20% 80%, rgba(251, 146, 60, 0.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 60% 65%, rgba(253, 186, 116, 0.8), transparent 60%),
        radial-gradient(2px 2px at 85% 85%, rgba(249, 115, 22, 0.75), transparent 60%),
        radial-gradient(1px 1px at 40% 90%, rgba(254, 215, 170, 0.7), transparent 60%);
    background-size: 200px 190px;
    animation: hh-pfx-rise 11s linear infinite;
}
@keyframes hh-pfx-rise {
    to { background-position: 0 -190px; }
}

/* Gold Dust: shimmering golden sparkle field */
.hh-pfx-gold-dust::before {
    background-image:
        radial-gradient(1.5px 1.5px at 15% 35%, rgba(252, 211, 77, 0.9), transparent 60%),
        radial-gradient(1px 1px at 50% 60%, rgba(251, 191, 36, 0.8), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 25%, rgba(253, 230, 138, 0.85), transparent 60%),
        radial-gradient(1px 1px at 90% 70%, rgba(245, 158, 11, 0.7), transparent 60%);
    background-size: 190px 170px;
    animation: hh-pfx-fall 20s linear infinite, hh-pfx-twinkle 3s ease-in-out infinite alternate;
}
.hh-pfx-gold-dust::after {
    background: radial-gradient(80% 90% at 50% 0%, rgba(245, 158, 11, 0.12), transparent 65%);
}
@keyframes hh-pfx-twinkle {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hh-frame::before,
    .hh-pfx::before,
    .hh-pfx::after { animation: none !important; }
}