:root {
    --brand-blue: #0e81c5;
    --brand-blue-700: #0b6da6;
    --brand-blue-500: #0e81c5;
    --brand-blue-300: #4ba5d8;
    --brand-blue-100: #d7ecf9;

    --brand-green: #009640;
    --brand-green-700: #007b35;
    --brand-green-500: #009640;
    --brand-green-300: #36b26a;

    --brand-yellow: #f9b233;
    --brand-yellow-700: #e09a17;
    --brand-yellow-500: #f9b233;
    --brand-yellow-300: #ffd26f;

    --bg: var(--brand-blue);
    --primary: var(--brand-green);
    --accent: var(--brand-yellow);

    --surface: #ffffff;
    --surface-soft: #f8fcff;
    --text: #0f2f47;
    --muted-text: #4b6478;
    --text-on-bg: #ffffff;
    --border: rgba(255,255,255,0.35);
    --card-border: rgba(14, 129, 197, 0.22);
    --card-shadow: 0 14px 28px rgba(6, 54, 86, 0.16);

    --btn-primary-bg: var(--primary);
    --btn-primary-hover: var(--brand-green-700);
    --btn-primary-text: #ffffff;

    --btn-accent-bg: var(--accent);
    --btn-accent-hover: var(--brand-yellow-700);
    --btn-accent-text: #0f2f47;

    --home-bg-top: #a4d4e9;
    --home-bg-bottom: #8BC4E4;
    --home-bg-glow-a: rgba(249, 178, 51, 0.18);
    --home-bg-glow-b: rgba(0, 150, 64, 0.14);
}

.app-bg {
    background:
        radial-gradient(circle at 12% 12%, var(--home-bg-glow-a), transparent 46%),
        radial-gradient(circle at 84% 82%, var(--home-bg-glow-b), transparent 42%),
        linear-gradient(155deg, var(--home-bg-top), var(--home-bg-bottom));
    color: var(--text-on-bg);
}

.card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-accent {
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
}