:root {
    --eco-primary: #2e7d32;
    --eco-primary-strong: #1b5e20;
    --eco-primary-soft: #43a047;
    --eco-secondary: #42a5f5;
    --eco-success: #43a047;
    --eco-danger: #e53935;
    --eco-warning: #ffb300;
    --eco-accent: #fb8c00;
    --eco-background: #e8f5e9;
    --eco-surface: #ffffff;
    --eco-surface-soft: #f1f8e9;
    --eco-container: #ddefd9;
    --eco-container-strong: #c8e6c9;
    --eco-highlight: #aed581;
    --eco-border: #b7d7b8;
    --eco-text: #1b4332;
    --eco-text-soft: #52796f;
    --eco-coin: #ffd54f;
    --eco-xp: #29b6f6;
    --eco-diamond: #8e24aa;
    --eco-event: #7e57c2;
    --eco-mission: #26c6da;
    --eco-shadow-sm: 0 12px 30px rgba(46, 125, 50, 0.08);
    --eco-shadow-md: 0 22px 50px rgba(27, 94, 32, 0.14);
    --eco-shadow-lg: 0 34px 70px rgba(27, 94, 32, 0.18);
    --eco-radius-sm: 16px;
    --eco-radius-md: 24px;
    --eco-radius-lg: 32px;
    --eco-font-body: "Nunito", "Segoe UI", sans-serif;
    --eco-font-display: "Baloo 2", "Nunito", sans-serif;
    --eco-transition-fast: 0.18s ease;
    --eco-transition-base: 0.26s ease;
}

body.eco-app,
body.eco-guest {
    font-family: var(--eco-font-body);
    color: var(--eco-text);
}

body.eco-app {
    background:
        radial-gradient(circle at top left, rgba(255, 213, 79, 0.24), transparent 20%),
        radial-gradient(circle at 85% 10%, rgba(66, 165, 245, 0.18), transparent 18%),
        radial-gradient(circle at 20% 80%, rgba(38, 198, 218, 0.12), transparent 18%),
        linear-gradient(180deg, #f7fbf5 0%, var(--eco-background) 58%, #d7edd6 100%);
}

body.eco-guest {
    background:
        radial-gradient(circle at top left, rgba(255, 213, 79, 0.2), transparent 22%),
        radial-gradient(circle at top right, rgba(66, 165, 245, 0.16), transparent 18%),
        linear-gradient(180deg, #184d31 0%, #2e7d32 45%, #66bb6a 100%);
}