/* Liquid Frost Theme System - Light & Dark Modes */

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



:root {

    /* Light Mode Colors */

    --surface: #f7f9fc;

    --surface-dim: #d8dadd;

    --surface-bright: #f7f9fc;

    --surface-container-lowest: #ffffff;

    --surface-container-low: #f2f4f7;

    --surface-container: #eceef1;

    --surface-container-high: #e6e8eb;

    --surface-container-highest: #e0e3e6;

    --on-surface: #191c1e;

    --on-surface-variant: #444652;

    --inverse-surface: #2d3133;

    --inverse-on-surface: #eff1f4;



    --outline: #747683;

    --outline-variant: #c4c6d4;

    --surface-tint: #3759b3;



    /* Bills Brand Colors */

    --primary: #00205f;

    --on-primary: #ffffff;

    --primary-container: #00338d;

    --on-primary-container: #81a1ff;

    --inverse-primary: #b4c5ff;



    --secondary: #ba002a;

    --on-secondary: #ffffff;

    --secondary-container: #e0273f;

    --on-secondary-container: #fffbff;



    --tertiary: #4a1000;

    --on-tertiary: #ffffff;

    --tertiary-container: #6f1e01;

    --on-tertiary-container: #f9845f;



    --error: #ba1a1a;

    --on-error: #ffffff;

    --error-container: #ffdad6;

    --on-error-container: #93000a;



    --background: #f7f9fc;

    --on-background: #191c1e;

    --surface-variant: #e0e3e6;



    --deep-void: #00005C;

    --glass-highlight: #FFFFFF;



    /* Glass Effect Variables */

    --glass-bg: rgba(255, 255, 255, 0.6);

    --glass-border: rgba(255, 255, 255, 0.8);

    --glass-shadow: rgba(0, 0, 92, 0.08);

    --glass-blur: 20px;



    /* Spacing */

    --unit: 8px;

    --container-max: 1440px;

    --gutter: 24px;

    --margin-mobile: 16px;

    --margin-desktop: 48px;



    /* Border Radius */

    --rounded-sm: 0.25rem;

    --rounded: 0.5rem;

    --rounded-md: 0.75rem;

    --rounded-lg: 1rem;

    --rounded-xl: 1.5rem;

    --rounded-full: 9999px;



    /* Typography */

    --font-headline: 'Syne', sans-serif;

    --font-body: 'Hanken Grotesk', sans-serif;

    --font-mono: 'JetBrains Mono', monospace;



    /* Override GeneratePress Variables with Bills Colors */

    --contrast: #00205f;

    --contrast-2: #00338d;

    --contrast-3: #7ea3ff;

    --base: #f7f9fc;

    --base-2: #eceef1;

    --base-3: #ffffff;

    --accent: #ba002a;

}



/* Dark Mode - Dark Blue Theme */

[data-theme="dark"] {

    --surface: #0a1628;

    --surface-dim: #050b14;

    --surface-bright: #0f1e35;

    --surface-container-lowest: #06091a;

    --surface-container-low: #0d1a2e;

    --surface-container: #101f38;

    --surface-container-high: #152844;

    --surface-container-highest: #1a2f4f;

    --on-surface: #e0e8f5;

    --on-surface-variant: #b8c8e0;

    --inverse-surface: #d4e1f5;

    --inverse-on-surface: #0f1e35;



    --outline: #6b7a94;

    --outline-variant: #2a3f5f;



    --primary: #7ea3ff;

    --on-primary: #00174b;

    --primary-container: #003d99;

    --on-primary-container: #d4e1ff;



    --secondary: #c41e3a;

    --on-secondary: #ffffff;

    --secondary-container: #8a0020;

    --on-secondary-container: #ffd6d5;



    --tertiary: #ffb59e;

    --on-tertiary: #552000;

    --tertiary-container: #802a0b;

    --on-tertiary-container: #ffdbd0;



    --background: #0a1628;

    --on-background: #e0e8f5;

    --surface-variant: #2a3f5f;



    --deep-void: #7ea3ff;

    --glass-highlight: rgba(126, 163, 255, 0.15);



    /* Dark Mode Glass Effects - Blue Tinted */

    --glass-bg: rgba(15, 30, 53, 0.75);

    --glass-border: rgba(126, 163, 255, 0.2);

    --glass-shadow: rgba(0, 11, 36, 0.6);

    --glass-blur: 30px;



    /* Override GeneratePress Variables for Dark Mode */

    --contrast: #e0e8f5;

    --contrast-2: #b8c8e0;

    --contrast-3: #7ea3ff;

    --base: #0d1a2e;

    --base-2: #101f38;

    --base-3: #152844;

    --accent: #c41e3a;

}



/* Base Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-body);

    background: var(--background);

    color: var(--on-background);

    line-height: 1.6;

    transition: background-color 0.3s ease, color 0.3s ease;

}



a {

    text-decoration: none;

}



/* Glass Surface Component */

.glass-surface {

    background: var(--glass-bg);

    backdrop-filter: blur(var(--glass-blur));

    -webkit-backdrop-filter: blur(var(--glass-blur));

    border: 1.5px solid var(--glass-border);

    border-radius: var(--rounded-xl);

    box-shadow:

        0 20px 40px var(--glass-shadow),

        inset 0 1px 0 var(--glass-highlight);

    position: relative;

    overflow: hidden;

}



.glass-surface::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 0% 0%, rgba(0, 51, 141, 0.35) 0%, transparent 50%);

    pointer-events: none;

    z-index: 0;

}



.glass-surface > * {

    position: relative;

    z-index: 1;

}



.glass-surface-sm {

    background: var(--glass-bg);

    backdrop-filter: blur(calc(var(--glass-blur) * 0.75));

    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.75));

    border: 1px solid var(--glass-border);

    border-radius: var(--rounded-lg);

    box-shadow: 0 10px 20px var(--glass-shadow);

}



/* Typography Classes */

.headline-xl {

    font-family: var(--font-headline);

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.03em;

}



.headline-lg {

    font-family: var(--font-headline);

    font-size: clamp(2rem, 4vw, 2.5rem);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.02em;

}



.headline-md {

    font-family: var(--font-headline);

    font-size: clamp(1.25rem, 2.5vw, 1.5rem);

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.01em;

}



.body-lg {

    font-family: var(--font-body);

    font-size: 1.125rem;

    font-weight: 400;

    line-height: 1.6;

}



.body-md {

    font-family: var(--font-body);

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.6;

}



.label-md {

    font-family: var(--font-mono);

    font-size: 0.875rem;

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}



.label-sm {

    font-family: var(--font-mono);

    font-size: 0.75rem;

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



/* Button Styles */

.btn-primary {

    background: linear-gradient(135deg, var(--primary), var(--primary-container));

    color: var(--on-primary);

    border: none;

    padding: 1rem 2rem;

    border-radius: var(--rounded-full);

    font-family: var(--font-body);

    font-weight: 700;

    font-size: 1rem;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px var(--glass-shadow);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px var(--glass-shadow);

}



.btn-secondary {

    background: var(--glass-bg);

    backdrop-filter: blur(var(--glass-blur));

    -webkit-backdrop-filter: blur(var(--glass-blur));

    color: var(--primary);

    border: 1px solid var(--glass-border);

    padding: 1rem 2rem;

    border-radius: var(--rounded-full);

    font-family: var(--font-body);

    font-weight: 700;

    font-size: 1rem;

    cursor: pointer;

    transition: all 0.3s ease;

}



.btn-secondary:hover {

    backdrop-filter: blur(calc(var(--glass-blur) * 1.5));

    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5));

    border-color: var(--primary);

}



/* Card Component */

.card {

    background: var(--glass-bg);

    backdrop-filter: blur(var(--glass-blur));

    -webkit-backdrop-filter: blur(var(--glass-blur));

    border: 1.5px solid var(--glass-border);

    border-radius: var(--rounded-xl);

    padding: 2rem;

    box-shadow:

        0 20px 40px var(--glass-shadow),

        inset 0 1px 0 var(--glass-highlight);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 0% 0%, rgba(0, 51, 141, 0.7) 0%, rgba(0, 51, 141, 0.2) 35%, transparent 60%);

    pointer-events: none;

    z-index: 0;

}



.card > * {

    position: relative;

    z-index: 1;

}



.card:hover {

    transform: translateY(-4px);

    box-shadow:

        0 28px 56px var(--glass-shadow),

        inset 0 1px 0 var(--glass-highlight);



/* ================================================================

   Article Iframe Viewer Styles (Namespaced to avoid conflicts)

   ================================================================ */



.article-viewer-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 0;

    margin-bottom: 1.5rem;

    border-bottom: 2px solid var(--outline-variant);

}



.article-home-link {

    font-family: 'Syne', sans-serif;

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--primary);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.diamond {

    font-size: 1.25rem;

    color: var(--secondary);

}



.article-source-link {

    font-family: 'JetBrains Mono', monospace;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--on-surface-variant);

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.article-source-link:hover {

    color: var(--primary);

}



.article-viewer-nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    padding: 1rem;

    margin-bottom: 2rem;

    background: rgba(255, 255, 255, 0.6);

    backdrop-filter: blur(20px);

    border-radius: 8px;

    border: 1px solid var(--outline-variant);

}



.article-nav-left,

.article-nav-right {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.article-back-btn {

    font-family: 'JetBrains Mono', monospace;

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--primary);

    text-decoration: none;

    text-transform: uppercase;

}



.article-back-btn:hover {

    color: var(--secondary);

}



.article-share-label {

    font-family: 'JetBrains Mono', monospace;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--on-surface-variant);

    text-transform: uppercase;

}



.article-social-btns {

    display: flex;

    gap: 0.75rem;

}



.article-social-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    background: var(--surface-container);

    border: 1px solid var(--outline-variant);

    border-radius: 8px;

    color: var(--on-surface-variant);

    text-decoration: none;

    transition: all 0.2s ease;

}



.article-social-btn:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: var(--on-primary);

    transform: translateY(-2px);

}



.article-viewer-iframe-wrapper {

    margin-bottom: 3rem;

}



.article-viewer-iframe {

    width: 100%;

    min-height: 100vh;

    border: none;

    border-radius: 8px;

    background: var(--surface-container-lowest);

}



.article-viewer-bottom {

    text-align: center;

    padding: 2rem 0;

}



.article-bottom-back-btn {

    display: inline-block;

    font-family: 'Syne', sans-serif;

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--primary);

    text-decoration: none;

    text-transform: uppercase;

    padding: 1rem 2rem;

    background: rgba(255, 255, 255, 0.6);

    backdrop-filter: blur(20px);

    border: 2px solid var(--primary);

    border-radius: 8px;

    transition: all 0.2s ease;

}



.article-bottom-back-btn:hover {

    background: var(--primary);

    color: var(--on-primary);

    transform: translateY(-2px);

}



/* Mobile Responsive */

@media (max-width: 767px) {

    .article-viewer-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    

    .article-home-link {

        font-size: 1rem;

    }

    

    .article-source-link {

        font-size: 0.625rem;

    }

    

    .article-viewer-nav {

        flex-direction: column;

        align-items: flex-start;

    }

    

    .article-nav-right {

        width: 100%;

        justify-content: space-between;

    }

    

    .article-share-label {

        font-size: 0.625rem;

    }

    

    .article-social-btn {

        width: 32px;

        height: 32px;

    }

    

    .article-bottom-back-btn {

        font-size: 1rem;

        padding: 0.75rem 1.5rem;

    }

}



/* Dark Mode */

[data-theme="dark"] .article-viewer-nav {

    background: rgba(0, 0, 0, 0.6);

}



[data-theme="dark"] .article-bottom-back-btn {

    background: rgba(0, 0, 0, 0.6);

}