/* ======= Variables ======= */
:root {
    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 0.8rem; /* Added for small text elements */
    --font-size-code: 0.9em; /* Added for code blocks */
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-lead: 1.25rem;
    --font-size-chart-title: 1.1rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.6;
    --line-height-headings: 1.2;
    --line-height-lead: 1.5;
    
    /* Colors */
    --color-primary: #9B8174;
    --color-primary-rgb: 155, 129, 116; /* Added */
    --color-primary-dark: #8A7267;
    --color-primary-light: #B8A69D;
    --color-secondary: #7D8E95;
    --color-secondary-dark: #6A7A80;
    --color-secondary-light: #9AA7AC;
    --color-accent: #A5A58D;
    --color-accent-rgb: 165, 165, 141; /* Added */
    --color-accent-dark: #8F8F7A;
    --color-accent-light: #BDBDA9;
    --color-black-rgb: 0, 0, 0; /* Added */
    --color-white-rgb: 255, 255, 255; /* Added */
    
    /* Status/Feedback Colors */
    --color-success: #2ecc71;
    --color-success-rgb: 46, 204, 113;
    --color-warning: #f1c40f;
    --color-warning-rgb: 241, 196, 15;
    --color-error: #e74c3c;
    --color-error-rgb: 231, 76, 60;
    --color-info: #3498db;
    --color-info-rgb: 52, 152, 219;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    
    /* Text Colors */
    --color-text: #ffffff;
    --color-text-light: #7a8a9a;
    --color-text-dark: #2c3e50;
    --color-text-white-primary: white;
    --color-text-white-secondary: rgba(255, 255, 255, 0.85);
    --color-text-white-tertiary: rgba(255, 255, 255, 0.7);
    --color-text-comment-date: rgba(255, 255, 255, 0.6);
    --color-tag-background: rgba(255, 255, 255, 0.1);
    
    /* Spacing - using a 4px scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    
    /* Borders */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-round: 9999px;
    --border-width-standard: 1px;
    --border-width-thick: 2px;
    --color-border-neutral-mobile-card: rgba(var(--color-white-rgb), 0.2); /* Added */
    
    /* Shadows */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 15px 35px rgba(0, 0, 0, 0.2);
    
    /* Transitions */
    --transition-standard: all 0.3s ease;
    --animation-timing-cardFadeIn: 0.5s ease-out forwards;
    --animation-delay-card-1: 0.1s;
    --animation-delay-card-2: 0.2s;
    --animation-delay-card-3: 0.3s;
    --animation-delay-card-4: 0.4s;
    --animation-delay-card-5: 0.5s;


    /* == Glassmorphism Effect Variables == */
    --glass-background-color: rgba(0, 0, 0, 0.5);
    --glass-backdrop-filter: blur(8px);
    --glass-border-color: rgba(255, 255, 255, 0.1);
    --glass-text-color: var(--color-text-white-secondary);
    /* Added hover state variables */
    --glass-background-color-hover: rgba(0, 0, 0, 0.85);
    --glass-border-color-hover: rgba(255, 255, 255, 0.2);

    /* == Blog Template Specific == */
    --blog-card-background-color: rgba(0, 0, 0, 0.65); /* Darker background for main blog card */
    --gradient-footer-background: linear-gradient(to bottom, var(--glass-background-color), transparent 80px);
    
    /* == Layout Variables == */
    --container-width: 90%;
    --container-max-width: 1000px; /* Added based on previous reads */
    --hero-content-max-width: 800px;
    --hero-negative-space: -20px;
    --dark-theme-negative-margin: -64px;
    --card-grid-min-width: 300px;
    --color-grid-min-width: 150px;
    --animation-showcase-min-width: 200px;
    --chart-min-height: 180px;
    --blog-content-columns: 2fr 1fr;
    --column-min-width: 300px; /* Added */
    
    /* == Column Layout Variables == */
    --column-toggle-size: 40px;
    --column-contracted-width: 100px;
    --column-title-width: 260px;
    --column-card-spacing: 20px;
    --column-title-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    --column-toggle-hover-scale: 1.05;
    --column-toggle-opacity: 0.95; /* Added */
    --vertical-title-rotation: -90deg; /* Added */
    --column-zindex-header: 100;
    --column-zindex-toggle: 101;
    --column-zindex-content: 2;
    
    /* == Hero Variables == */
    --hero-overlay-background: var(--glass-background-color);
    --hero-backdrop-filter: var(--glass-backdrop-filter);
    
    /* == Forms */
    --input-border-color: rgba(0,0,0,0.1);
    --input-focus-shadow-color: rgba(var(--color-primary-rgb), 0.1);
    --input-error-border-color: var(--color-error);
    --input-error-background: rgba(var(--color-error-rgb), 0.05);
    --negative-value-warning-background: rgba(var(--color-error-rgb), 0.1); /* Added */
    /* Buttons */
    --secondary-btn-background: rgba(255, 255, 255, 0.15);
    --secondary-btn-hover-background: rgba(255, 255, 255, 0.25);
    /* Modals */
    --modal-overlay-background: rgba(0,0,0,0.5);
    --modal-max-width-default: 1000px;
    --modal-max-width-small: 750px; /* Explainer/help and other short modals */
    --modal-max-width-xsmall: 400px; /* Added */
    --modal-max-width-medium: 1200px;
    --modal-max-width-large: 1600px;
    --modal-max-width-disclaimer: 1600px; /* Added for disclaimer modal */
    --modal-glass-background: rgba(0, 0, 0, 0.1);
    --modal-backdrop-blur: 15px;
    --modal-content-backdrop-blur: 20px; /* Added */
    --modal-input-placeholder-color: rgba(var(--color-white-rgb), 0.6); /* Added */
    --modal-close-hover-opacity: 0.8; /* Added */
    --modal-left-column-min-width: 250px; /* Added */
    --modal-class-selector-max-height: 700px; /* Added */
    /* Code */
    --code-inline-background: rgba(0,0,0,0.05);
    --code-block-background: #2d2d2d;
    --code-block-text-color: #f8f8f2;
    --syntax-keyword: #f92672;
    --syntax-string: #e6db74;
    --syntax-comment: #75715e;
    --syntax-function: #66d9ef;
    --syntax-number: #ae81ff;
    --syntax-operator: #f8f8f2;
    --syntax-punctuation: #f8f8f2;
    --terminal-background: #1e1e1e;
    --terminal-header-background: #2d2d2d;
    --terminal-text-color: #f8f8f2;
    --terminal-control-close: #ff5f56;
    --terminal-control-minimize: #ffbd2e;
    --terminal-control-maximize: #27c93f;
    --terminal-prompt-color: #50fa7b;
    --terminal-output-color: #6272a4;
    /* Tables */
    --table-border-color: rgba(0,0,0,0.1);
    --table-header-background: rgba(var(--color-primary-rgb), 0.05);
    --table-row-hover-background: rgba(var(--color-primary-rgb), 0.05);
    /* Lists */
    --list-blockquote-border-color: var(--color-primary);
    --list-definition-border-color: rgba(var(--color-primary-rgb), 0.2);

    /* == Responsive Breakpoints == */
    --breakpoint-mobile: 768px;
    
    /* == Chart Layout == */
    --chart-container-flex-ratio: 1 1 30%;
    
    /* == Components == */
    --card-transform-y: -4px;
    --card-interactive-hover-transform: translateY(var(--card-transform-y));
    --button-transform-y: -2px;
    --button-hover-transform: translateY(var(--button-transform-y));
    --button-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1);
    --button-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.2);
    --button-shadow-large: 0 4px 12px rgba(0, 0, 0, 0.2);
    --button-shadow-primary: 0 2px 8px rgba(0, 0, 0, 0.2);
    --button-shadow-primary-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --circular-btn-size: 60px;
    --circular-btn-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
    --circular-btn-hover-shadow: 0 8px 16px rgba(var(--color-primary-rgb), 0.4);
    --circular-btn-rotation: 15deg;
    --color-swatch-height: 100px;
    --color-swatch-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    --color-background-swatch-border: 1px solid rgba(0, 0, 0, 0.05);
    --animation-item-height: 100px;
    --animation-item-background: rgba(var(--color-primary-rgb), 0.1);
    
    /* Card Component */
    --card-zindex: 1;
    
    /* Reset Button Component */
    --reset-btn-border-color: rgba(255, 255, 255, 0.1);
    --reset-btn-border-color-hover: rgba(255, 255, 255, 0.2);
    --reset-btn-opacity: 0.5;
    --reset-btn-opacity-hover: 0.7;
    
    /* Color Swatch Component */
    --color-swatch-background-light: #fdfbf9;
    --color-swatch-background-dark: #f8f6f3;
    
    /* Collapsible Component */
    --collapsible-toggle-font-size: 1.1rem;
    --collapsible-toggle-icon-size: 0.8em;
    --collapsible-content-max-height: 1000px;
    --collapsible-border-width: 2px;
    --collapsible-border-color: rgba(var(--color-primary-rgb), 0.2);
    --collapsible-rotation: 180deg;
    
    /* Section Subtitle */
    --section-subtitle-font-size: 1.2rem;
    
    /* == Navigation == */
    --nav-site-title-font-size: 1.5rem;
    --nav-link-font-size: 0.95rem;
    --nav-underline-bottom: 6px;
    --nav-underline-scale-hover: 0.6;
    --nav-underline-scale-active: 1;
    --nav-toggle-line-width: 20px;
    --nav-toggle-line-margin: 4px;
    --nav-toggle-transform-y: 6px;
    --nav-mobile-backdrop: rgba(0, 0, 0, 0.95);
    --nav-mobile-backdrop-filter: blur(10px);
    --nav-mobile-transform-y: -10px;
    
    /* == Forms == */
    --input-height: 42px;
    --checkbox-radio-size: 18px;
    --form-text-size: 0.875rem;
    --form-dropdown-bg: #2d2d2d;
    --form-input-bg-transparent: rgba(255, 255, 255, 0.1);
    --form-input-border-transparent: rgba(255, 255, 255, 0.2);
    --custom-select-arrow-size: 3px;
    --custom-select-arrow-border-width: 2px;
    --custom-select-option-max-height: 350px;
    --custom-select-option-bg-hover: rgba(255, 255, 255, 0.1);
    --custom-select-option-bg-selected: rgba(var(--color-primary-rgb), 0.5);
    --form-button-bg-transparent: rgba(var(--color-primary-rgb), 0.6);
    --form-button-border-transparent: rgba(var(--color-primary-rgb), 0.7);
    --form-button-bg-hover: rgba(var(--color-primary-rgb), 0.8);
    --form-button-border-hover: rgba(var(--color-primary-rgb), 0.9);
    
    /* Custom Select Dropdown */
    --custom-select-dropdown-spacing: 4px;
    --custom-select-z-index: 10;
    
    /* Radio & Checkbox Styles */
    --radio-label-box-shadow-width: 1px;
    --radio-label-hover-bg: rgba(255, 255, 255, 0.05);
    --radio-label-selected-bg: rgba(var(--color-primary-rgb), 0.15);
    
    /* Button Group */
    --button-group-gap: 10px;
    --button-group-margin-bottom: 15px;
    --selector-btn-padding-x: 12px;
    --selector-btn-padding-y: 8px;
    --selector-btn-bg-opacity: 0.2;
    
    /* Asset Class Selector */
    --class-selector-padding: 0px;
    --class-selector-border-radius: 4px;
    
    /* Radio Button Grid */
    --radio-grid-column-gap: 8px;
    --radio-grid-first-column-width: 24px;
    --radio-grid-padding-x: 8px;
    --radio-grid-padding-y: 6px;
    --radio-grid-gap: 4px;
    --radio-input-margin-top: 3px;
    
    /* Small Text in Forms */
    --form-small-font-size: 0.9em;
    --form-small-margin-left: 4px;
    --form-small-opacity: 0.7;
    
    /* Mixed Asset Inputs */
    --form-mixed-input-flex: 0.5;
    --form-mixed-input-min-width: 120px;
    
    /* Form Transitions */
    --form-transition-speed: 0.2s;
    
    /* == Modals == */
    --modal-animation-y: -20px;
    --modal-close-font-size: 1.5rem;
    --modal-animation-duration: 0.3s;
    
    /* == Animations == */
    --fade-in-duration: 2s;
    --slide-in-duration: 1s;
    --slide-in-y-from: 30px;
    --zoom-in-duration: 1s;
    --zoom-in-scale-from: 0.8;
    --pulse-duration: 2s;
    --pulse-scale-max: 1.05;

    /* == Chart Specific Variables == */
    --chart-font-color: var(--color-text-white-secondary);
    --chart-title-font-color: var(--color-text-white-primary);
    --chart-paper-bgcolor: transparent;
    --chart-plot-bgcolor: transparent;
    --chart-slice-border-color: rgba(255, 255, 255, 0.2); /* Use specific value for now */
    --chart-slice-border-width: 1px;
    --chart-text-font-size: 12; /* Plotly takes number */
    --chart-title-font-size: 16; /* Plotly takes number */
    --chart-hole-size: 0.4;
    --chart-margin-l: 10;
    --chart-margin-r: 10;
    --chart-margin-t: 100; /* Increased from 60 to 100 for more space below chart heading */
    --chart-margin-b: 10;
    --chart-container-height: 350px; /* Added standard height */
    /* Chart hover tooltip (Plotly hoverlabel): styled to match the app's dark glass surfaces
       instead of Plotly's default slice-coloured box with a harsh white border. */
    --chart-hover-bgcolor: rgba(20, 22, 28, 0.8);
    --chart-hover-bordercolor: rgba(255, 255, 255, 0.12);
    --chart-hover-font-color: #ffffff;
    --chart-hover-font-size: 13; /* Plotly takes number */
    /* Chart risk/type colours (orangeBlue scheme): literal values, not the shared --color-*
       tokens, so the chart palette can move independently. See docs/charts.md. */
    --chart-color-type-lifestyle: #B8B4AD;   /* neutral grey, lighter */
    --chart-color-type-investment: #787D82;  /* neutral grey, darker */
    --chart-color-inv-growth: #D08A4A;        /* muted orange */
    --chart-color-inv-defensive: #7799B4;     /* muted blue */

    /* New variables for more specific chart text styling */
    --chart-inside-text-font-size: 12; /* For Plotly textinfo, textposition: 'inside' */
    --chart-inside-text-font-color: #ffffff;
    --chart-annotation-font-size: 11; /* For Plotly annotations */
    --chart-annotation-font-color: #ffffff;

    /* == Layout Specific Variables == */
    /* Card Grid Animations */
    --card-animation-y-offset: 10px;
    
    /* Chart Dimensions */
    --chart-standard-height: 300px;
    --chart-item-min-height: 150px;
    --chart-item-flex-basis-hypothetical: 30%; /* Added */
    --chart-item-min-width-hypothetical: 150px; /* Added */
    
    /* Columns Layout */
    --column-gap: var(--space-6);
    --content-button-height: 38px;
    
    /* Preset Buttons */
    --preset-btn-active-bg-opacity: 0.4;
    --preset-btn-active-border-opacity: 0.6;
    
    /* Scrollbar Styling */
    --scrollbar-width: 8px;
    --scrollbar-height: 8px;
    --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-color-hover: rgba(255, 255, 255, 0.3);
    --scrollbar-track-color: transparent;
    --scrollbar-firefox-width: thin;
    --scrollbar-track-color-modal: rgba(var(--color-white-rgb), 0.1); /* Added */
    
    /* == Table Specific Variables == */
    --table-delete-icon-font-size: 1.1rem;
    --table-delete-icon-transition: color 0.2s ease;
    --table-type-cell-font-size: 1.2rem;
    --table-cell-data-label-width: 45%;
    --table-responsive-padding-left: 50%;
    --table-standard-col-width: 22%;
    --table-wide-col-width: 30%;
    --table-narrow-col-width: 4%;
    --table-balance-col-width: 80px;
    --table-row-hover-primary-opacity: 0.1;
    --table-row-selected-primary-opacity: 0.2;
    --table-allocation-name-col-width: 34%;
    --table-allocation-value-col-width: 22%;
    --table-cashflow-table-col1-width: 25%;
    --table-cashflow-table-col2-width: 25%;
    --table-cashflow-table-col3-width: 25%;
    --table-cashflow-table-col4-width: 12.5%;
    --table-cashflow-table-col5-width: 12.5%;
    
    /* == Utility Specific Variables == */
    --utility-mobile-breakpoint: 768px;
    --utility-desktop-breakpoint: 769px;
    --utility-opacity-25: 0.25;
    --utility-opacity-50: 0.5;
    --utility-opacity-75: 0.75;
    
    /* == Z-Index System == */
    --z-index-nav-base: 10;
    --z-index-nav-list: 90;
    --z-index-nav-toggle: 100;
    --z-index-modal: 1000;
    --z-index-hero: 1; /* Added */
    --z-index-background-image: -2; /* Added */
    --z-index-background-overlay: -1; /* Added */
    
    /* == Columns Specific Variables == */
    --column-header-offset-top: 10px;
    --column-header-offset-right: 20px;
    --column-header-contracted-offset-right: 10px;
    --column-toggle-icon-font-size: 20px;
    --column-vertical-title-font-size: 1.2rem;
    --column-vertical-title-letter-spacing: 1px;
    --column-vertical-title-margin-top: 10px;
    --column-vertical-padding-total: calc(2 * var(--space-6));
    
    /* == Modal Specific Variables == */
    --modal-content-width: 90%;
    
    /* == Transition Durations == */
    --transition-duration-fast: 0.2s;
    --transition-duration-standard: 0.3s;
    
    /* == Other Variables == */
    --gradient-angle-standard: 135deg;
    --nav-site-title-letter-spacing: -0.01em;
    --nav-site-title-hover-opacity: 0.9;

    /* Action Buttons (Save/Load) */
    --nav-action-button-bg: rgba(var(--color-black-rgb), 0.2); /* Added */
    --nav-action-button-border-color: rgba(var(--color-white-rgb), 0.2); /* Added */
    --nav-action-button-bg-hover: rgba(var(--color-black-rgb), 0.4); /* Added */
    --nav-action-button-border-color-hover: rgba(var(--color-white-rgb), 0.4); /* Added */

    /* Preset Buttons */
    --preset-btn-bg: rgba(var(--color-primary-rgb), 0.7); /* Added */
}

/* ======= Reset & Base Styles ======= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto; /* This allows main to grow and take all available space */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../background.jpg'); /* fallback where image-set is unsupported */
    background-image: image-set(
        url('../background.webp') type('image/webp'),
        url('../background.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    opacity: 0.9;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
}

/* ======= Typography ======= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.section-title {
    color: var(--color-text-dark);
    margin-bottom: var(--space-6);
    position: relative;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: var(--space-6);
    color: var(--color-text-white-primary);
}

/* ======= Section Styles ======= */
.section {
    padding: var(--space-8) 0;
    position: relative;
}

/* Remove the section background */
.section::before {
    display: none;
}

/* ======= Header & Footer ======= */
header, footer {
    position: relative;
    /* z-index: 2; */ /* Ensure this line is removed or commented out */
}

header {
    box-shadow: var(--shadow-small);
}

footer {
    margin-top: var(--space-8);
    padding: var(--space-6) 0;
    flex-shrink: 0; /* Prevents the footer from shrinking */
}

/* Hero section specific styles */
.hero {
    padding: var(--space-16) 0;
    text-align: center;
    margin-bottom: var(--space-16);
    position: relative;
    z-index: 1;
    overflow: hidden;

    background-color: var(--hero-overlay-background);
    backdrop-filter: var(--hero-backdrop-filter);
    -webkit-backdrop-filter: var(--hero-backdrop-filter);
}

.hero h2 {
    color: var(--color-text-white-primary);
    margin-bottom: var(--space-4);
    position: relative;
}

.hero .lead {
    position: relative;
}
main {
    display: flex; /* Make main a flex container */
    flex-direction: column; /* Stack children vertically */
    flex-grow: 1; /* Ensure main grows */
}