@font-face {
    font-family: 'VCR OSD Mono';
    src: url('../fonts/VCR_OSD_MONO.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.font-headline-md,
.font-headline-lg,
.font-display-lg {
    font-family: 'Syne', sans-serif !important;
}

:root {
    /* Light Theme Colors */
    --background: #f8f9fa;
    --on-background: #191c1d;
    --surface: #f8f9fa;
    --on-surface: #191c1d;
    --on-surface-variant: #3b4a44;
    --surface-variant: #e1e3e4;
    --outline: #6b7b74;
    --outline-variant: #b9cac3;
    --surface-container-low: #f3f4f5;
    --surface-container-high: #e7e8e9;
    --surface-container-highest: #e1e3e4;
    --surface-container-lowest: #ffffff;
    
    --primary: #006b57;
    --primary-container: #00e5bc;
    --on-primary-container: #00614f;
    --secondary: #565e71;
    --secondary-container: #dbe2f9;
    --on-secondary-container: #5c6477;
    --tertiary: #005bc0;
    --tertiary-container: #b4cbff;
    --on-tertiary-container: #0052af;

    /* Neumorphic Shadows - Light */
    --shadow-light: #ffffff;
    --shadow-dark: #d1d9e6;
}

.dark {
    /* Dark Theme Colors - Neutral White/Gray */
    --background: #161819;
    --on-background: #ffffff;
    --surface: #161819;
    --on-surface: #ffffff;
    --on-surface-variant: #a1a1a1;
    --surface-variant: #2d2f30;
    --outline: #707070;
    --outline-variant: #3d3f40;
    --surface-container-low: #1c1e1f;
    --surface-container-high: #282a2b;
    --surface-container-highest: #333536;
    --surface-container-lowest: #050606;
    
    --primary: #00e5bc; /* Vibrant green accent */
    --primary-container: #00382d;
    --on-primary-container: #00e5bc;
    --secondary: #c0c6dc;
    --secondary-container: #44474e;
    --on-secondary-container: #dbe2f9;
    --tertiary: #b4cbff;
    --tertiary-container: #004494;
    --on-tertiary-container: #d8e2ff;

    /* Neumorphic Shadows - Dark */
    --shadow-light: #242729;
    --shadow-dark: #080909;
}

body {
    background-color: var(--background);
    color: var(--on-background);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dark .glass-panel {
    background: rgba(25, 28, 29, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.neumorphic-panel {
    background-color: var(--surface);
    border-radius: 1.5rem;
    box-shadow:  12px 12px 24px var(--shadow-dark),
                -12px -12px 24px var(--shadow-light);
    transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.neumorphic-panel:hover {
    box-shadow:  16px 16px 32px var(--shadow-dark),
                -16px -16px 32px var(--shadow-light);
}



.bg-fluid-gradient {
    background: radial-gradient(circle at 10% 20%, rgba(0, 224, 184, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 107, 87, 0.05) 0%, transparent 40%);
    z-index: -1;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.dark .bg-fluid-gradient {
    background: radial-gradient(circle at 10% 20%, rgba(0, 224, 184, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 229, 188, 0.1) 0%, transparent 40%);
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay.active .mobile-menu-content {
    transform: translateX(0);
}

#progress-bar {
    transform-origin: left;
    will-change: transform;
}

#top-stories-slider {
    cursor: grab;
    user-select: none;
}

#top-stories-slider:active {
    cursor: grabbing;
}

/* Ensure inputs and textareas are legible in both light and dark modes */
input[type="text"],
input[type="email"],
textarea {
    background-color: var(--surface) !important;
    color: var(--on-surface) !important;
    border: 1px solid var(--outline-variant) !important;
}

.dark input[type="text"],
.dark input[type="email"],
.dark textarea {
    background-color: var(--surface-variant) !important;
    color: #ffffff !important;
    border: 1px solid var(--outline-variant) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 107, 87, 0.2) !important;
}

/* Responsive Embeds */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--outline-variant);
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Rich text embeds styling */
.prose iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

.prose .twitter-tweet {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Native Glass Pill and Badge Utilities */
.glass-badge {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.glass-badge-primary {
    background-color: color-mix(in srgb, var(--primary-container) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

.glass-badge-secondary {
    background-color: color-mix(in srgb, var(--secondary-container) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent) !important;
}

.glass-badge-tertiary {
    background-color: color-mix(in srgb, var(--tertiary-container) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--tertiary) 30%, transparent) !important;
}

.liquid-glass-pill-primary {
    background-color: color-mix(in srgb, var(--primary-container) 75%, transparent) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08) !important;
}

.liquid-glass-pill-secondary {
    background-color: color-mix(in srgb, var(--secondary-container) 75%, transparent) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08) !important;
}

.liquid-glass-pill-tertiary {
    background-color: color-mix(in srgb, var(--tertiary-container) 75%, transparent) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08) !important;
}

.dark .liquid-glass-pill-primary {
    background-color: color-mix(in srgb, var(--primary-container) 65%, transparent) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .liquid-glass-pill-secondary {
    background-color: color-mix(in srgb, var(--secondary-container) 65%, transparent) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

.dark .liquid-glass-pill-tertiary {
    background-color: color-mix(in srgb, var(--tertiary-container) 65%, transparent) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Logo Swap Utility Classes */
.logo-dark {
    display: none !important;
}
.logo-light {
    display: block !important;
}

.dark .logo-dark {
    display: block !important;
}
.dark .logo-light {
    display: none !important;
}