:root {
    color-scheme: light;
    --brand-primary: #2E6F40;
    --brand-secondary: #68BA7F;
    --brand-light: #CFFFDC;
    --brand-dark: #253D2C;
    --brand-surface: #eef7ed;
    --bg-page: #ffffff;
    --text-primary: #253D2C;
    --text-muted: #5d8c6d;
    --border-color: rgba(46, 111, 64, 0.14);
}
body {
    min-height: 100vh;
    background-color: var(--brand-light);
    color: var(--text-primary);
}
html {
    scroll-behavior: smooth;
}
a {
    transition: color 0.2s ease, background-color 0.2s ease;
    color: var(--text-primary);
}
a:hover {
    color: var(--brand-primary);
}
.hero-card, .feature-card {
    border: 1px solid var(--border-color);
    background: var(--bg-page);
}
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(46,111,64,0), rgba(46,111,64,0.35), rgba(46,111,64,0));
}
.btn-cancel {
    border: 1px solid rgba(37, 61, 44, 0.16);
    background: transparent;
    color: var(--brand-dark);
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}
.btn-cancel:hover {
    background: rgba(46, 111, 64, 0.08);
    color: var(--brand-primary);
}
body.theme-dark {
    color-scheme: dark;
    --brand-primary: #68BA7F;
    --brand-secondary: #8fd69c;
    --brand-light: #1f2a1e;
    --brand-dark: #f4f8ef;
    --brand-surface: #122116;
    --bg-page: #161f18;
    --text-primary: #e6f2dc;
    --text-muted: #a8c9a1;
    --border-color: rgba(104, 186, 127, 0.18);
    background-color: #0f1912;
}
body.theme-dark a {
    color: var(--text-primary);
}
body.theme-dark .header-button {
    background-color: #18291c;
    color: #e6f2dc;
}
body.theme-dark .hero-card,
body.theme-dark .feature-card {
    background: #17261d;
    border-color: rgba(104, 186, 127, 0.18);
}
body.theme-dark .section-divider {
    background: linear-gradient(90deg, rgba(46,111,64,0), rgba(104,186,127,0.4), rgba(46,111,64,0));
}
.header-button {
    background-color: var(--brand-primary);
    color: #fff;
}
.header-button:hover {
    background-color: var(--brand-secondary);
}
.hero-bg {
    background-image: radial-gradient(circle at top left, rgba(46,111,64,0.22), transparent 30%), radial-gradient(circle at bottom right, rgba(104,186,127,0.16), transparent 20%);
}