/* ==========================================================================
   1. DESIGN TOKENS (Variables)
   ========================================================================== */
:root {
    /* Color Palette - Professional Engineering Focus */
    --bg-primary: #f1f5f9;       /* Light cool gray for external body background */
    --bg-surface: #ffffff;       /* Pure white for the main content card */
    --bg-header: #0f172a;        /* Deep slate/navy for high-contrast header structural anchor */
    
    --text-primary: #0f172a;     /* Dark slate for optimal readability */
    --text-secondary: #334155;   /* Medium slate for body text blocks */
    --text-muted: #94a3b8;       /* Clean light gray for structural subtitles and dates */
    --text-header: #f8fafc;      /* Bright white for header elements */
    
    --accent: #2563eb;           /* Professional royal blue for interactive links */
    --accent-hover: #1d4ed8;     /* Darker blue for active states */
    --border-color: #cbd5e1;     /* Distinct gray for tables and hr dividers */
    
    --code-bg: #1e293b;          /* Dark background for code block environments */
    --code-text: #f8fafc;        /* White text for block code output */
    --inline-code-text: #b91c1c; /* Standout crimson for inline code definitions */

    /* Typography Hierarchy */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Layout & Spacing Units */
    --max-width: 800px;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3.5rem;
    --radius: 6px;
}

/* ==========================================================================
   2. BASE STYLES & RESET
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1.05rem;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.25;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

h1 { 
    font-size: 2.0rem; 
    letter-spacing: -0.025em; 
}

h2 { 
    font-size: 1.65rem; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: var(--space-sm); 
    margin-top: var(--space-xl); 
}

h3 { 
    font-size: 1.25rem; 
}

p, ul, ol {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ==========================================================================
   4. LAYOUT COMPONENTS (Header, Main, Footer)
   ========================================================================== */
/* Header Configuration with Deep Background Contrast */
.site-header {
    background-color: var(--bg-header);
    color: var(--text-header);
    padding: var(--space-lg) 0;
    border-bottom: 4px solid var(--accent); /* Accent bar highlights development focus */
}

.header-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .header-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.brand-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-header);
    letter-spacing: -0.02em;
}

.brand-title:hover {
    color: var(--text-header);
    text-decoration: none;
}

.brand-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Main Site Navigation Links inside Header */
.site-nav {
    display: flex;
    gap: var(--space-md);
    font-weight: 500;
    font-size: 0.95rem;
}

.site-nav a {
    color: var(--text-muted);
    transition: color 0.15s ease-in-out;
}

.site-nav a:hover {
    color: var(--text-header);
    text-decoration: none;
}

/* Main Content Area Container */
.site-main {
    flex: 1;
    padding: var(--space-xl) 0;
    background-color: var(--bg-surface);
}

/* Footer Element Configuration */
.site-footer {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-xl) 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .footer-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.site-footer p {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.site-footer a {
    color: var(--text-secondary);
    font-weight: 500;
}

.site-footer a:hover {
    color: var(--accent);
}

.site-footer span {
    color: var(--border-color);
    padding: 0 var(--space-sm);
}

/* ==========================================================================
   5. MARKDOWN & TECHNICAL ELEMENTS STYLING
   ========================================================================== */
/* Standard Lists Configuration */
.site-main ul, .site-main ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.site-main li {
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
}

/* Structured Layout Data Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
    font-size: 0.95rem;
}

th, td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
}

/* Left-bordered blockquotes for architectural summaries or metrics */
blockquote {
    border-left: 4px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-lg) 0;
    background-color: var(--bg-primary);
    font-style: italic;
    border-radius: 0 var(--radius) var(--radius) 0;
}

blockquote p {
    margin-bottom: 0;
}

/* Technical Syntax and Code Formatting Blocks */
code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    background-color: var(--bg-primary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: var(--inline-code-text);
}

pre {
    background-color: var(--code-bg);
    padding: var(--space-md);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--space-lg) 0;
}

pre code {
    background-color: transparent;
    padding: 0;
    color: var(--code-text);
    border-radius: 0;
}

hr {
    border: 0;
    border-top: 2px solid var(--border-color);
    margin: var(--space-xl) 0;
}