/* ===== Karta Wędkarska — design tokens ===== */
/* Global design decisions only. Component-specific values belong to their feature file. */

/* --- Light theme (default) --- */
:root {
    color-scheme: light;

    /* Brand */
    --kw-brand: #2563EB;
    --kw-brand-hover: #1D4ED8;
    --kw-brand-light: #EFF6FF;

    /* Semantic */
    --kw-success: #16A34A;
    --kw-success-light: #F0FDF4;
    --kw-danger: #DC2626;
    --kw-danger-light: #FEF2F2;
    --kw-warning: #BA7517;
    --kw-warning-light: #FFFBEB;

    /* Feature accents */
    --kw-teal: #1D9E75; /* Nauka */
    --kw-blue: #378ADD; /* Przepisy */
    --kw-amber: #BA7517; /* Atlas ryb */
    --kw-coral: #D85A30; /* Kalendarz */
    --kw-purple: #7F77DD; /* Tematy */
    --kw-red: #D13C30; /* Ochrona / IGO */

    /* Surfaces */
    --kw-bg: #FFFFFF;
    --kw-surface-1: #F8F9FA;
    --kw-surface-2: #F1F3F5;

    /* Borders */
    --kw-border: #E2E5E9;
    --kw-border-strong: #C8CDD3;

    /* Text */
    --kw-text: #1A1D21;
    --kw-text-secondary: #5C6370;
    --kw-text-muted: #9CA3AF;
    --kw-text-on-accent: #FFFFFF;

    /* Radius */
    --kw-radius-sm: 6px; /* inputs, small buttons, radio/checkbox */
    --kw-radius-md: 8px; /* answer cards, alerts, form fields */
    --kw-radius-lg: 12px; /* section cards, question cards, modals */
    --kw-radius-pill: 20px; /* filter chips, badges, pill buttons */

    /* Shadows */
    --kw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --kw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --kw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Spacing scale (4px base) */
    --kw-space-1: 4px;
    --kw-space-2: 8px;
    --kw-space-3: 12px;
    --kw-space-4: 16px;
    --kw-space-5: 20px;
    --kw-space-6: 24px;
    --kw-space-8: 32px;
    --kw-space-10: 40px;

    /* Typography */
    --kw-font: 'Inter',   -apple-system,   BlinkMacSystemFont,   'Segoe UI',   sans-serif;

    /* Type scale */
    --kw-font-size-page-title: clamp(22px, 2.75vw, 32px);
    --kw-font-size-section: 20px;
    --kw-font-size-question: 16px;
    --kw-font-size-body: 14px;
    --kw-font-size-sm: 13px;
    --kw-font-size-xs: 12px;
    --kw-font-size-xxs: 11px;

    /* Application layout */
    --kw-content-narrow: 720px;
    --kw-content-default: 960px;
    --kw-content-wide: 1320px;
    --kw-page-padding: 24px;
    --kw-page-padding-mobile: 16px;

    /* Breakpoints (for reference — use in @media queries) */
    /* --kw-bp-mobile: 768px;    < 768 = mobile (1 col, bottom nav, burger) */
    /* --kw-bp-tablet: 1024px;   768–1024 = tablet (2 col, top nav) */
    /* --kw-bp-desktop: 1024px;  > 1024 = desktop (3-4 col, top nav, max-width 720-960px) */

    /* Footer background gifs */
    --kw-footer-gif-right: url('/images/animfooter.gif');
    --kw-footer-gif-left: url('/images/animfooter-l.gif');
}

/* --- Dark theme --- */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --kw-bg: #000000;
        --kw-surface-1: #1A1D24;
        --kw-surface-2: #23272F;
        --kw-border: #333841;
        --kw-border-strong: #4B5261;
        --kw-text: #E8EAED;
        --kw-text-secondary: #9CA3AF;
        --kw-text-muted: #6B7280;
        --kw-brand-light: rgba(37, 99, 235, 0.15);
        --kw-success-light: rgba(22, 163, 74, 0.15);
        --kw-danger-light: rgba(220, 38, 38, 0.15);
        --kw-warning-light: rgba(186, 117, 23, 0.15);
        --kw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
        --kw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --kw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

        --kw-footer-gif-right: url('/images/animfooter-dark.gif');
        --kw-footer-gif-left: url('/images/animfooter-l-dark.gif');
    }
}

/* --- Explicit theme overrides (toggle support) --- */

[data-theme="dark"] {
    color-scheme: dark;

    --kw-bg: #000000;
    --kw-surface-1: #1A1D24;
    --kw-surface-2: #23272F;
    --kw-border: #333841;
    --kw-border-strong: #4B5261;
    --kw-text: #E8EAED;
    --kw-text-secondary: #9CA3AF;
    --kw-text-muted: #6B7280;
    --kw-brand-light: rgba(37, 99, 235, 0.15);
    --kw-success-light: rgba(22, 163, 74, 0.15);
    --kw-danger-light: rgba(220, 38, 38, 0.15);
    --kw-warning-light: rgba(186, 117, 23, 0.15);
    --kw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --kw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --kw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

    --kw-footer-gif-right: url('/images/animfooter-dark.gif');
    --kw-footer-gif-left: url('/images/animfooter-l-dark.gif');
}

[data-theme="light"] {
    color-scheme: light;

    --kw-bg: #FFFFFF;
    --kw-surface-1: #F8F9FA;
    --kw-surface-2: #F1F3F5;
    --kw-border: #E2E5E9;
    --kw-border-strong: #C8CDD3;
    --kw-text: #1A1D21;
    --kw-text-secondary: #5C6370;
    --kw-text-muted: #9CA3AF;
    --kw-brand-light: #EFF6FF;
    --kw-success-light: #F0FDF4;
    --kw-danger-light: #FEF2F2;
    --kw-warning-light: #FFFBEB;
    --kw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --kw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --kw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --kw-footer-gif-right: url('/images/animfooter.gif');
    --kw-footer-gif-left: url('/images/animfooter-l.gif');
}