[data-theme="dark"] {
    --color-bg: #0f1a1f;
    --color-bg-secondary: #16262d;
    --color-bg-tertiary: #1e333c;
    --color-bg-card: rgba(22, 38, 45, 0.85);
    --color-bg-card-hover: rgba(30, 51, 60, 0.95);
    --color-bg-overlay: rgba(15, 26, 31, 0.88);
    --color-text-primary: #e8eef1;
    --color-text-secondary: #b7c7cf;
    --color-text-tertiary: #8aa0ab;
    --color-text-muted: #6b8290;
    --color-border: rgba(61, 139, 148, 0.28);
    --color-border-light: rgba(184, 149, 61, 0.2);
    --color-border-hover: rgba(212, 181, 106, 0.45);
    --color-accent-primary: #3d9ea0;
    --color-accent-secondary: #2f7d82;
    --color-accent-tertiary: #d4b56a;
    --color-accent-quaternary: #5a9aa0;
    --color-gradient-start: #0d5c63;
    --color-gradient-mid: #3d9ea0;
    --color-gradient-end: #b8953d;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px rgba(61, 158, 160, 0.22);
    --shadow-glow-strong: 0 0 30px rgba(61, 158, 160, 0.35);
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-warning: #d4b56a;
    --color-info: #3d9ea0;
    --grid-bg: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%233d9ea0' stroke-width='0.5' stroke-opacity='0.2'/%3E%3C/svg%3E");
    --grid-bg-dots: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%233d9ea0' fill-opacity='0.28'/%3E%3C/svg%3E");
}

[data-theme="light"] {
    --color-bg: #f2f5f7;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e7eef1;
    --color-bg-card: rgba(255, 255, 255, 0.96);
    --color-bg-card-hover: #ffffff;
    --color-bg-overlay: rgba(242, 245, 247, 0.92);
    --color-text-primary: #14212b;
    --color-text-secondary: #3d5360;
    --color-text-tertiary: #5a7380;
    --color-text-muted: #6b8290;
    --color-border: rgba(207, 217, 223, 0.95);
    --color-border-light: rgba(184, 198, 206, 0.7);
    --color-border-hover: rgba(13, 92, 99, 0.45);
    --color-accent-primary: #0d5c63;
    --color-accent-secondary: #0a3d42;
    --color-accent-tertiary: #b8953d;
    --color-accent-quaternary: #3d8b94;
    --color-gradient-start: #0d5c63;
    --color-gradient-mid: #3d8b94;
    --color-gradient-end: #b8953d;
    --shadow-sm: 0 2px 4px rgba(20, 33, 43, 0.08);
    --shadow-md: 0 4px 12px rgba(20, 33, 43, 0.1);
    --shadow-lg: 0 8px 24px rgba(20, 33, 43, 0.12);
    --shadow-xl: 0 20px 60px rgba(20, 33, 43, 0.15);
    --shadow-glow: 0 0 20px rgba(13, 92, 99, 0.12);
    --shadow-glow-strong: 0 0 30px rgba(13, 92, 99, 0.2);
    --color-success: #2f7d4a;
    --color-error: #b33a3a;
    --color-warning: #b8953d;
    --color-info: #0d5c63;
    --grid-bg: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%230d5c63' stroke-width='0.5' stroke-opacity='0.14'/%3E%3C/svg%3E");
    --grid-bg-dots: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%230d5c63' fill-opacity='0.18'/%3E%3C/svg%3E");
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, .hero-brand, .header-logo-text, .cta-title, .problem-title, .solution-title {
    font-family: var(--font-display);
}