/**
 * 火桥（huoqiao）· 多功能沉浸式 WordPress 主题
 * 联系方式：12492501@qq.com
 * 支持正版，从我做起，你的支持是我们前行的动力！
 *
 * @package   huoqiao
 * @author    三木
 * @copyright Copyright (c) 2026-09-01 huoqiao.cn
 * @license   GPL-2.0-or-later
 * @link      https://huoqiao.cn
 * @tags      design-tokens, responsive, dark-mode, glassmorphism, animation
 */

:root {
    
    --weather-accent: var(--color-primary);
    --weather-accent-strong: var(--color-primary-light);
    --weather-accent-soft: rgba(var(--color-primary-rgb), 0.14);
    --weather-accent-soft-2: rgba(var(--color-primary-rgb), 0.26);

    --weather-glass: rgba(255, 255, 255, 0.72);
    --weather-glass-strong: rgba(255, 255, 255, 0.86);
    --weather-glass-blur: blur(22px) saturate(140%);
    --weather-border: rgba(255, 255, 255, 0.7);
    --weather-inner-border: rgba(58, 46, 40, 0.08);

    --weather-text: #3a2e28;
    --weather-muted: #8a7a70;

    --weather-radius: 24px;
    --weather-radius-sm: 16px;
    --weather-radius-pill: 999px;

    --weather-shadow: 0 20px 60px rgba(58, 46, 40, 0.16);
    --weather-shadow-sm: 0 8px 24px rgba(58, 46, 40, 0.10);
    --weather-shadow-xs: 0 2px 10px rgba(58, 46, 40, 0.06);

    --weather-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
    --weather-glow: 0 0 24px rgba(var(--color-primary-rgb), 0.28);
    --weather-glow-strong: 0 0 30px rgba(var(--color-primary-rgb), 0.40);

    
    --weather-ambient:
        radial-gradient(900px 600px at 12% -8%, rgba(var(--color-primary-light-rgb), 0.16), transparent 60%),
        radial-gradient(820px 540px at 92% 2%, rgba(var(--color-primary-rgb), 0.14), transparent 58%),
        radial-gradient(720px 720px at 50% 122%, rgba(var(--color-primary-rgb), 0.10), transparent 60%);

    
    --weather-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
    --weather-accent: var(--color-primary-pale);
    --weather-accent-strong: var(--color-primary-light);
    --weather-accent-soft: rgba(var(--color-primary-rgb), 0.18);
    --weather-accent-soft-2: rgba(var(--color-primary-rgb), 0.30);

    --weather-glass: rgba(46, 38, 32, 0.82);
    --weather-glass-strong: rgba(46, 38, 32, 0.92);
    --weather-border: rgba(255, 255, 255, 0.14);
    --weather-inner-border: rgba(255, 255, 255, 0.10);

    --weather-text: #efe6db;
    --weather-muted: #b8a898;

    --weather-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
    --weather-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.36);
    --weather-shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.30);

    --weather-glow: 0 0 24px rgba(var(--color-primary-pale-rgb), 0.30);
    --weather-glow-strong: 0 0 30px rgba(var(--color-primary-pale-rgb), 0.42);

    --weather-ambient:
        radial-gradient(900px 600px at 12% -8%, rgba(var(--color-primary-light-rgb), 0.12), transparent 60%),
        radial-gradient(820px 540px at 92% 2%, rgba(var(--color-primary-rgb), 0.10), transparent 58%);

    --weather-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

body {
    color: var(--weather-text);
    background-color: #faf6f0; 
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--weather-ambient), var(--weather-texture);
    background-size: cover, 240px 240px;
    background-repeat: no-repeat, repeat;
}

[data-theme="dark"] body {
    background-color: #1c1714; 
}

:focus-visible {
    outline: 2px solid var(--weather-accent);
    outline-offset: 2px;
}

a {
    color: var(--color-primary);
    transition: color var(--transition-fast, 0.15s ease),
                opacity var(--transition-fast, 0.15s ease);
}

a:hover {
    color: var(--color-primary-hover);
}

.hq-btn,
.btn,
.button,
button:not([class]),
input[type="submit"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border: 1px solid transparent;
    border-radius: var(--weather-radius-pill);
    background: var(--weather-text);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: var(--weather-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.25s ease,
                background-color 0.25s ease, border-color 0.25s ease,
                color 0.25s ease;
}

.hq-btn:hover,
.btn:hover,
.button:hover,
button:not([class]):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--weather-glow);
    background: #4a3a32;
}

.hq-btn--ghost,
.btn--ghost,
.hq-btn-secondary,
.btn-secondary {
    background: var(--weather-accent-soft);
    color: var(--weather-text);
    border-color: var(--weather-accent);
}

.hq-btn--ghost:hover,
.btn--ghost:hover,
.hq-btn-secondary:hover,
.btn-secondary:hover {
    background: var(--weather-accent-soft-2);
    box-shadow: var(--weather-glow);
}

.hq-btn--sm,
.btn--sm {
    padding: 7px 16px;
    font-size: 13px;
}

.hq-card,
.card,
.widget,
.post-card {
    position: relative;
    background-color: var(--weather-glass);
    background-image: var(--weather-texture);
    background-size: 200px 200px;
    background-repeat: repeat;
    backdrop-filter: var(--weather-glass-blur);
    -webkit-backdrop-filter: var(--weather-glass-blur);
    border: 1px solid var(--weather-border);
    border-radius: var(--weather-radius);
    box-shadow: var(--weather-shadow-sm);
    color: var(--weather-text);
}

.hq-card--sm,
.widget {
    border-radius: var(--weather-radius-sm);
}

.hq-glass {
    background: var(--weather-glass);
    backdrop-filter: var(--weather-glass-blur);
    -webkit-backdrop-filter: var(--weather-glass-blur);
    border: 1px solid var(--weather-border);
}

.hq-card,
.post-card,
.hq-glow {
    transition: transform 0.3s var(--hover-easing, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.3s ease, border-color 0.3s ease;
}

.hq-card:hover,
.post-card:hover,
.hq-glow:hover {
    transform: translateY(-4px);
    box-shadow: var(--weather-shadow);
    border-color: var(--weather-accent-soft-2);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--weather-inner-border);
    border-radius: var(--weather-radius-sm);
    background: rgba(255, 255, 255, 0.6);
    color: var(--weather-text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: rgba(255, 255, 255, 0.06);
    color: var(--weather-text);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--weather-accent);
    box-shadow: 0 0 0 4px var(--weather-accent-soft);
    background: rgba(255, 255, 255, 0.78);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    background: rgba(255, 255, 255, 0.10);
}

.hq-sec-title,
.widget-title,
.sec-title,
.module-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--weather-serif);
    font-weight: 700;
    color: var(--weather-text);
    letter-spacing: 0.02em;
}

.hq-sec-title::before,
.widget-title::before,
.sec-title::before,
.module-title::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--weather-accent), var(--weather-accent-strong));
    flex-shrink: 0;
}

.hq-sec-title i,
.hq-sec-title svg,
.widget-title i,
.widget-title svg {
    color: var(--weather-accent);
}

.hq-card i[class*="fa-"],
.widget i[class*="fa-"],
.hq-btn i[class*="fa-"],
.hq-sec-title i[class*="fa-"],
.hq-ico i[class*="fa-"] {
    color: var(--weather-accent);
    transition: color 0.2s ease, transform 0.2s ease;
}

.hq-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--weather-accent-soft);
    border: 1px solid var(--weather-accent-soft-2);
    color: var(--weather-accent);
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: var(--weather-shadow-xs);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}

.hq-ico > i,
.hq-ico > svg {
    color: var(--weather-accent);
    font-size: inherit;
}

.hq-ico:hover {
    transform: translateY(-2px);
    box-shadow: var(--weather-glow);
}

.hq-ico--sm { width: 30px; height: 30px; font-size: 13px; }
.hq-ico--lg { width: 48px; height: 48px; font-size: 20px; }

.hq-ico--solid {
    background: linear-gradient(135deg, var(--weather-accent), var(--weather-accent-strong));
    border-color: transparent;
    color: #fff;
}
.hq-ico--solid > i,
.hq-ico--solid > svg { color: #fff; }

.hq-badge,
.tag,
.badge,
.post-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: var(--weather-radius-pill);
    background: var(--weather-accent-soft);
    border: 1px solid var(--weather-accent-soft-2);
    color: var(--weather-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.hq-badge--solid,
.tag--solid {
    background: linear-gradient(135deg, var(--weather-accent), var(--weather-accent-strong));
    border-color: transparent;
    color: #fff;
}

.hq-glow { box-shadow: var(--weather-shadow-sm); }
.hq-glow:hover { box-shadow: var(--weather-shadow); }

.hq-texture { position: relative; }
.hq-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--weather-texture);
    background-size: 200px 200px;
    opacity: 0.5;
    pointer-events: none;
}

.hq-serif { font-family: var(--weather-serif); }

.hq-accent { color: var(--weather-accent); }

@media (max-width: 760px) {
    .hq-card,
    .card,
    .widget,
    .post-card {
        border-radius: var(--weather-radius-sm);
    }
    .hq-btn,
    .btn,
    .button,
    button:not([class]),
    input[type="submit"] {
        padding: 10px 20px;
    }
}