/* --- TelecomByte CSS Core Layout Properties Matrix --- */

:root {
    /* Color Palette Configuration */
    --primary-color: #0056D2;
    --text-color: #1f2124;
    --text-muted: #5f6368;
    --background: #f8fafc;
    --card-background: #ffffff;
    --border-color: #e2e8f0;

    /* High-Performance, Zero-Weight Professional System Font Stack */
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Typographic Fluid Scale (Proportionally scales down layout-shift free) */
    --fs-base: clamp(15px, 0.5vw + 14px, 16px);
    --fs-h1: clamp(2.2rem, 5vw + 1rem, 2.75rem);
    --fs-h2: clamp(1.75rem, 4vw + 1rem, 2.125rem);
    --fs-h3: clamp(1.35rem, 3vw + 1rem, 1.5rem);
    --fs-h4: 20px;
}

/* Global Document Normalization Mapping Rules */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--background);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.25;
}

/* ==========================================================================
    NATIVE SYSTEM DARK MODE SWITCH (0% JavaScript Overhead)
============================================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #0B0F19; 
        --card-background: #131A26;
        --text-color: #F1F5F9; 
        --text-muted: #94A3B8;
        --border-color: #1E293B;
    }

    /* Target global structural theme nodes */
    .single-article, .grid-card, .trending-sidebar, #respond, .author-bio-box, .nav-box {
        background: var(--card-background) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    }

    .post-title, .grid-card-body h4, .sidebar-title, #respond h3, .author-bio-name a, .nav-box .nav-title, .key-highlights h2 {
        color: #ffffff !important;
    }

    .post-content, .trending-sidebar li a, .author-bio-desc, .key-highlights li {
        color: #E2E8F0 !important;
    }

    /* High legibility link adaptation for dark contrast environments */
    .post-content a, .author-link-url {
        color: #60a5fa !important;
    }

    /* Soften background placeholders so they don't blindingly clash in the dark */
    .ad-inline, .key-highlights, #respond textarea, #respond input[type="text"], #respond input[type="email"] {
        background: #1E293B !important;
        border-color: var(--border-color) !important;
        color: #ffffff !important;
    }
}