/* ==========================================================================
   Eslövs Skyttegille – design tokens
   Light theme by default, automatic dark mode via prefers-color-scheme.
   ========================================================================== */

:root {
    /* Brand colors: deep green (forest/precision) + gold (target/medal) */
    --color-primary-900: #0f2e22;
    --color-primary-800: #16402f;
    --color-primary-700: #1f5a41;
    --color-primary-600: #27704f;
    --color-primary-500: #2f8760;
    --color-primary-100: #e3f1ea;

    --color-accent-600: #b8860b;
    --color-accent-500: #d4a017;
    --color-accent-100: #fbf1d9;

    --color-danger-500: #c0392b;
    --color-danger-100: #fbeae8;

    /* Payment status text (e.g. member fees): unpaid, partly paid, paid, overdue, overpaid */
    --color-status-overpaid: #2f6db5;
    --color-status-unpaid: #8c9792;
    --color-status-partial: #a87a00;
    --color-status-paid: #1f8a52;
    --color-status-overdue: #c0392b;

    --color-bg: #f4f6f5;
    --color-surface: #ffffff;
    --color-surface-muted: #eef2f0;
    --color-border: #dfe5e2;

    --color-text: #1a2420;
    --color-text-muted: #5b6b64;
    --color-text-on-primary: #f4f6f5;

    --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, Helvetica, Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(15, 46, 34, 0.06), 0 1px 1px rgba(15, 46, 34, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 46, 34, 0.10);
    --shadow-lg: 0 16px 40px rgba(15, 46, 34, 0.16);

    --nav-width: 264px;
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0d1512;
        --color-surface: #12201a;
        --color-surface-muted: #16281f;
        --color-border: #23392e;

        --color-text: #eef3f0;
        --color-text-muted: #9fb3a9;
        --color-text-on-primary: #eef3f0;

        --color-primary-100: #16281f;
        --color-accent-100: #2a2213;

        --color-status-unpaid: #eef3f0;
        --color-status-overpaid: #6fb1f2;
        --color-status-partial: #f2c230;
        --color-status-paid: #4cc38a;
        --color-status-overdue: #ef6b5f;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    }
}