/**
 * Fuxi site — shared red/black theme: CSS variables, section dividers,
 * footer top line, card/nav border utilities. Load after tailwind.css + site-nav.css.
 */

:root {
    --color-accent: #e63d3d;
    --color-accent-bright: #ff7a6e;
    --color-accent-soft: #f08080;
    --color-accent-deep: #b32424;
    --color-accent-darker: #8b1a1a;
    --color-cyber-red: var(--color-accent);

    --color-dark-bg: #323030; /* rgb(50, 48, 48) */
    --color-card-bg: #323030; /* rgb(50, 48, 48) */
    --color-muted-text: #b9aeae;

    --color-border-subtle: rgba(255, 0, 0, 0.32);
    --color-border-hover: rgba(255, 0, 0, 0.55);
    --color-border-nav: rgba(255, 0, 0, 0.45);
    --color-icon-well: rgba(255, 0, 0, 0.22);

    /* Solid divider line color (no gradient); glow uses same hue */
    --section-divider-line: rgb(255, 0, 0);
    --section-divider-glow: rgb(255, 0, 0);
}

.border-theme-subtle {
    border-color: var(--color-border-subtle);
}

.hover\:border-theme-accent:hover {
    border-color: var(--color-border-hover);
}

.hover\:border-theme-accent-soft:hover {
    border-color: rgba(255, 0, 0, 0.42);
}

.border-theme-nav {
    border-color: var(--color-border-nav);
}

.bg-accent-glow {
    background-color: var(--color-icon-well);
}

.hr-theme {
    border: 0;
    height: 1px;
    background-color: var(--section-divider-line);
    box-shadow: 0 0 12px var(--section-divider-glow);
}

.hover\:bg-accent-deep:hover {
    background-color: var(--color-accent-deep);
}

/* Blog category chips (Tailwind-style slash opacity) */
.bg-cyber-red\/20 {
    background-color: rgba(230, 61, 61, 0.18);
}

.border-cyber-red\/30 {
    border-color: rgba(255, 0, 0, 0.35);
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-cyber-red {
    color: var(--color-cyber-red);
}

.hover\:text-cyber-red:hover {
    color: var(--color-cyber-red);
}

.bg-cyber-red {
    background-color: var(--color-cyber-red);
}

.bg-dark-bg {
    background-color: var(--color-dark-bg);
}

.bg-card-bg {
    background-color: var(--color-card-bg);
}

.text-muted-text {
    color: var(--color-muted-text);
}

.border-cyber-red\/50 {
    border-color: rgba(255, 0, 0, 0.48);
}

.hover\:border-cyber-red\/50:hover {
    border-color: rgba(255, 0, 0, 0.55);
}

.font-sans {
    font-family: 'Google Sans Flex', system-ui, 'Segoe UI', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    color: #f4f0f0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
    background-color: var(--color-dark-bg);
    scrollbar-width: thin;
    scrollbar-color: #ff3b3b #1f1f1f;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: #1f1f1f;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff3b3b, #8b0000);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff4d4d, #9b0000);
}

section {
    border: 0;
}