@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Rajdhani:wght@500;600;700&display=swap');

:root {
    /* Tech / Engineering Palette (Blueprint Ultimate - Visible Grid Edition) */
    /* Reverted to lighter Slate shades for better visibility */
    --bg: 15 23 42;
    /* Slate-900 (Original Blueprint Base) */
    --surface: 30 41 59;
    /* Slate-800 */
    --surface2: 51 65 85;
    /* Slate-700 */
    --border: 71 85 105;
    /* Slate-600 */
    --fg: 241 245 249;
    /* Contrast Text */
    --muted: 148 163 184;
    /* Secondary Text */

    --primary: 6 182 212;
    /* Cyan-500 (Laser Blue) */
    --primary2: 56 189 248;
    /* Sky-400 */
    --success: 16 185 129;
    /* Emerald */
    --danger: 239 68 68;
    /* Red Signal */

    --radius: 16px;
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

    --font-sans: 'Inter', ui-sans-serif, system-ui;
    --font-display: 'Rajdhani', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --code-bg: 10 15 30;
    --code-fg: 6 182 212;

    /* Radius mapping */
    --radius-page-card: 16px;
    --radius-section: 16px;
    --radius-banner: 16px;
    --radius-forum-card: 14px;
    --radius-forum-post: 12px;
    --radius-forum-reply: 12px;
    --radius-forum-category: 14px;
    --radius-article-card: 12px;
    --radius-article-cover: 12px;
    --radius-design-card: 12px;
    --radius-sidebar-item: 8px;
    --radius-dropdown: 12px;
    --radius-mobile-menu: 12px;
    --radius-input: 10px;
    --radius-button: 10px;
    --radius-search: 10px;
    --radius-modal: 16px;
    --radius-panel: 16px;
    --radius-card-small: 10px;
    --radius-badge: 6px;
    --radius-avatar: 12px;
}

/* 1. TEXTURE & BACKGROUND */
body {
    background-color: rgb(var(--bg));
    /* Grid + Noise Texture */
    /* Increased Grid Opacity (0.05 -> 0.15) for better visibility */
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(rgba(91, 105, 125, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 105, 125, 0.15) 1px, transparent 1px);
    background-size: 150px 150px, 40px 40px, 40px 40px;
    background-attachment: fixed;
}

#theme-video-bg,
.theme-video-overlay {
    display: none !important;
}

/* 2. SURFACE DEPTH (Embossed & Glass) - Lighter opacity for main surfaces */
body .bg-surface {
    background-color: rgba(30, 41, 59, 0.85) !important;
    /* Lighter/More opaque */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Double Border for Depth */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        /* Stronger highlight */
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 20px 40px -4px rgba(0, 0, 0, 0.5);

    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body .bg-surface2 {
    background-color: rgba(51, 65, 85, 0.6) !important;
    /* Lighter */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Specific class for List Headers (reduced shadow) */
body .bg-header {
    background-color: rgba(30, 41, 59, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        /* Highlight */
        0 4px 6px -1px rgba(0, 0, 0, 0.2);
    /* Subtle drop shadow */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body .border-border {
    border-color: rgba(71, 85, 105, 0.6) !important;
}

/* 3. LIVING EDGE (Animated Borders) */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

/* Apply living edge to specific hero/active elements or on hover ONLY for interactive elements */
body a.bg-surface:hover,
body button.bg-surface:hover,
body .interactive-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(6, 182, 212, 0.4) inset,
        0 0 0 1px rgba(6, 182, 212, 0.2),
        0 20px 50px -4px rgba(0, 0, 0, 0.5);
}

/* HEADER & FOOTER */
body .site-header,
body .site-footer {
    background-color: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* MOBILE MENU */
body .mobile-menu-panel.bg-surface {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-left: 1px solid rgba(6, 182, 212, 0.2);
}

body .mobile-menu-panel .mobile-menu-button {
    background: rgba(51, 65, 85, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(71, 85, 105, 0.3);
    color: rgb(var(--fg)) !important;
}

body .mobile-menu-panel .mobile-menu-button:hover {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.4);
    color: rgb(var(--primary)) !important;
}

/* INPUTS & SEARCH - "Inset" feel */
body .radius-input,
body .search-button {
    background: rgba(15, 23, 42, 0.6);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(71, 85, 105, 0.5);
    color: rgb(var(--fg));
}

body .search-button {
    border-radius: 0 10px 10px 0 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: rgb(var(--primary)) !important;
}

body .search-button:hover {
    background: rgba(6, 182, 212, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.5);
}

/* BUTTONS - Kept exactly as requested */
body .home-cta,
body .btn-gradient,
body .btn-gradient-green,
body .btn-gradient-red {
    border-radius: 10px !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

body .btn-gradient {
    background: linear-gradient(135deg, rgb(6, 182, 212), rgb(56, 189, 248));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        /* Top highlight */
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        /* Bottom shading */
        0 10px 20px rgba(6, 182, 212, 0.3);
    /* Glow */
}

body .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 15px 30px rgba(6, 182, 212, 0.4),
        0 0 20px rgba(6, 182, 212, 0.2);
    /* Halo */
}

body .btn-gradient-green {
    background: linear-gradient(135deg, rgb(16, 185, 129), rgb(4, 120, 87));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        /* Top highlight */
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        /* Bottom shading */
        0 10px 20px rgba(16, 185, 129, 0.3);
}

body .btn-gradient-green:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 15px 30px rgba(16, 185, 129, 0.4),
        0 0 20px rgba(16, 185, 129, 0.2);
}

body .btn-gradient-red {
    background: linear-gradient(135deg, rgb(239, 68, 68), rgb(185, 28, 28));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        /* Top highlight */
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        /* Bottom shading */
        0 10px 20px rgba(239, 68, 68, 0.3);
}

body .btn-gradient-red:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 15px 30px rgba(239, 68, 68, 0.4),
        0 0 20px rgba(239, 68, 68, 0.2);
}

/* TYPOGRAPHY */
h1,
h2,
h3 {
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Lifted text */
}

/* UTILITIES */
body .rounded-2xl {
    border-radius: 16px !important;
}

body .rounded-xl {
    border-radius: 14px !important;
}

body .rounded-lg {
    border-radius: 12px !important;
}

/* Force standard utilities to match semantic variables */
body .radius-page-card {
    border-radius: var(--radius-page-card) !important;
}

body .radius-section {
    border-radius: var(--radius-section) !important;
}

body .radius-banner {
    border-radius: var(--radius-banner) !important;
}

body .radius-forum-card {
    border-radius: var(--radius-forum-card) !important;
}

body .radius-forum-post {
    border-radius: var(--radius-forum-post) !important;
}

body .radius-forum-reply {
    border-radius: var(--radius-forum-reply) !important;
}

body .radius-forum-category {
    border-radius: var(--radius-forum-category) !important;
}

body .radius-article-card {
    border-radius: var(--radius-article-card) !important;
}

body .radius-article-cover {
    border-radius: var(--radius-article-cover) !important;
}

body .radius-design-card {
    border-radius: var(--radius-design-card) !important;
}

body .radius-sidebar-item {
    border-radius: var(--radius-sidebar-item) !important;
}

body .radius-dropdown {
    border-radius: var(--radius-dropdown) !important;
}

body .radius-mobile-menu {
    border-radius: var(--radius-mobile-menu) !important;
}

body .radius-input {
    border-radius: var(--radius-input) !important;
}

body .radius-button {
    border-radius: var(--radius-button) !important;
}

body .radius-search {
    border-radius: var(--radius-search) !important;
}

body .radius-search-left {
    border-top-left-radius: var(--radius-search) !important;
    border-bottom-left-radius: var(--radius-search) !important;
}

body .radius-modal {
    border-radius: var(--radius-modal) !important;
}

body .radius-panel {
    border-radius: var(--radius-panel) !important;
}

body .radius-card-small {
    border-radius: var(--radius-card-small) !important;
}

body .radius-badge {
    border-radius: var(--radius-badge) !important;
}

body .radius-avatar {
    /* This rule was empty, so it's closed here */
}

/* PAGINATION */
body .pagination-link {
    transition: all 0.3s ease;
}

body .pagination-link:hover {
    background-color: rgba(6, 182, 212, 0.15) !important;
    color: rgb(var(--primary)) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
    transform: translateY(-1px);
}

body .pagination-active {
    background: linear-gradient(135deg, rgb(6, 182, 212), rgb(56, 189, 248)) !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4);
    border: none !important;
}