:root {
    --primary: #235c4a;
    --primary-dark: #173f33;
    --background: #f5f7f8;
    --surface: #ffffff;
    --text-primary: #17201c;
    --text-secondary: #5f6f68;
    --border: #d7dfdc;
    --border-radius: 6px;
    --sidebar-width: 260px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #63b493;
        --primary-dark: #101614;
        --background: #111816;
        --surface: #18211e;
        --text-primary: #edf5f1;
        --text-secondary: #b6c7c0;
        --border: #2e4039;
        color-scheme: dark;
    }
}

:root[data-theme="light"] {
    --primary: #235c4a;
    --primary-dark: #173f33;
    --background: #f5f7f8;
    --surface: #ffffff;
    --text-primary: #17201c;
    --text-secondary: #5f6f68;
    --border: #d7dfdc;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --primary: #63b493;
    --primary-dark: #101614;
    --background: #111816;
    --surface: #18211e;
    --text-primary: #edf5f1;
    --text-secondary: #b6c7c0;
    --border: #2e4039;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text-primary);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
}

img,
svg {
    max-width: 100%;
}