/* =========================================================================
   faustyna.pl v2 — prototyp, 2026-04-20
   Tokeny zgodne z 02_design/tokeny.md (paleta z rwd_mobile/style.css)
   Mobile-first, 1 plik, bez frameworka.
   ========================================================================= */

:root {
    /* paleta brand green — pełna 9-stopniowa skala (rozszerzona 2026-05-02 v2.1) */
    --green-50:  #f3f7f4;   /* (v2) tło sekcji subtelne */
    --green-100: #e6efe9;   /* (v2) tło lekkie, hover kart */
    --green-200: #c5dccc;   /* (v2.1) soft alert bg, badge bg */
    --green-300: #9ec5a8;   /* (v2.1) divider on green section */
    --green-400: #6da685;   /* (v2.1) secondary CTA, active tab */
    --green-500: #3f8c5c;   /* (v2.1) bazowy pivot brand, focus-ring */
    --green-600: #2e9051;   /* (v2.1) hover dla --green-700 */
    --green-700: #1a7a45;   /* (v2) hover CTA, accent bloków */
    --green-800: #135632;   /* (v2) linki, CTA primary, nagłówki */
    --green-900: #1f3d31;   /* (v2) najciemniejszy — hero overlay, footer */

    /* akcenty (z mobile, bez zmian) */
    --accent-warm-600: #e15601;
    --accent-warm-500: #f68830;
    --accent-gold-500: #f0c24c;
    --accent-gold-100: #f9e5b5;

    /* neutrals legacy (zachowane bez zmian — używane przez istniejące komponenty) */
    --text:        #333333;
    --text-muted:  #879196;
    --border:      #d5dbdb;
    --border-light:#f7f7f7;
    --surface:     #eaeded;
    --bg:          #ffffff;

    /* neutrals nowa skala 9-stopniowa „warm gray / stone" (v2.1) — używana w nowych komponentach */
    --gray-50:  #fafaf9;
    --gray-100: #f5f5f4;
    --gray-200: #e7e5e4;
    --gray-300: #d6d3d1;
    --gray-400: #a8a29e;
    --gray-500: #78716c;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;

    /* semantic colors — feedback / status (v2.1) */
    --status-success-bg: #ecfdf5;
    --status-success-fg: #047857;
    --status-warning-bg: #fffbeb;
    --status-warning-fg: #b45309;
    --status-error-bg:   #fef2f2;
    --status-error-fg:   #b91c1c;
    --status-info-bg:    #eff6ff;
    --status-info-fg:    #1e40af;

    /* focus ring — a11y WCAG 2.4.7 (v2.1) */
    --focus-ring:      #3f8c5c;
    --focus-ring-soft: rgba(63, 140, 92, .25);

    /* scrim / overlay (v2.1) */
    --scrim-soft:   rgba(0, 0, 0, .25);
    --scrim-strong: rgba(0, 0, 0, .5);
    --scrim-modal:  rgba(15, 36, 25, .65);

    /* gradient + shadow z mobile */
    --gradient-hero:  linear-gradient(135deg, #135632 0%, #1a7a45 100%);
    --gradient-warm:  linear-gradient(#f68830, #e15601);
    --gradient-gold:  linear-gradient(#f9e5b5, #f0c24c);
    --shadow-hero:    0 3px 8px rgba(19, 86, 50, 0.3);
    --shadow-card:    0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
    --shadow-card-h:  0 2px 4px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.10);
    --shadow-modal:   0 15px 11px 1px rgba(0, 0, 0, 0.25);

    /* typography */
    --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-serif: "Georgia", "Times New Roman", serif;

    /* spacing scale (4pt) */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px;

    /* radius */
    --r-card: 12px;
    --r-btn:  8px;
    --r-pill: 9999px;

    /* layout */
    --container:  1280px;
    --utility-h:  36px;
    --nav-h:      64px;
    --header-h:   calc(var(--utility-h) + var(--nav-h));
}

/* =========================================================================
   GLOBAL FOCUS-VISIBLE — a11y WCAG 2.4.7 (dodane 2026-05-02 v2.1)
   :where(...) ma specyficzność 0 — komponenty z własnym focus-em wygrają.
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}