/* Design System Variables */
:root {
    --primary: #006b2b;
    --on-primary: #ffffff;
    --primary-container: #008738;
    --on-primary-container: #f7fff2;
    --secondary: #51616a;
    --on-secondary: #ffffff;
    --secondary-container: #d2e2ed;
    --on-secondary-container: #55656e;
    --background: #f9f9f7;
    --on-background: #1a1c1b;
    --surface: #f9f9f7;
    --on-surface: #1a1c1b;
    --surface-variant: #e2e3e1;
    --on-surface-variant: #3e4a3d;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f4f4f2;
    --surface-container: #eeeeec;
    --outline: #6e7a6c;
    --outline: #6e7a6c;
    --outline-variant: #bdcaba;
    --navbar-background: rgba(255, 255, 255, 0.964);
    --navbar-border: rgba(0, 0, 0, 0.08);

    /* Spacing & Layout */
    --container-max: 1440px;
    --container-narrow: 1024px;
    --section-spacing-desktop: 160px;
    --section-spacing-mobile: 80px;
    
    /* Fluid Typography Base */
    --font-scale: 1.25;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.dark {
    --primary: #65de7d;
    --on-primary: #003912;
    --primary-container: #00531f;
    --on-primary-container: #82fc97;
    --secondary: #b9c9d3;
    --on-secondary: #23323b;
    --secondary-container: #3a4951;
    --on-secondary-container: #d5e5f0;
    --background: #0d0f0e;
    --on-background: #e2e3e1;
    --surface: #0d0f0e;
    --on-surface: #e2e3e1;
    --surface-variant: #2a332a;
    --on-surface-variant: #bdcaba;
    --surface-container-lowest: #080a09;
    --surface-container-low: #0d0f0e;
    --surface-container: #161a18;
    --outline: #889486;
    --outline-variant: #2a332a;
    --navbar-background: rgba(19, 22, 20, 0.92);
    --navbar-border: rgba(255, 255, 255, 0.08);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}