:root {
    /* --------------------------------------------------------
       1.1 Odcienie szarości
       -------------------------------------------------------- */
    --fp-neutral-0: #FFFFFF;
    --fp-neutral-50: #F8FAFC;
    --fp-neutral-100: #F1F5F9;
    --fp-neutral-200: #E2E8F0;
    --fp-neutral-300: #CBD5E1;
    --fp-neutral-400: #94A3B8;
    --fp-neutral-500: #64748B;
    --fp-neutral-600: #475569;
    --fp-neutral-700: #334155;
    --fp-neutral-800: #1E293B;
    --fp-neutral-900: #0F172A;
    --fp-neutral-950: #020617;
    /* --------------------------------------------------------
       1.2 Typography
       -------------------------------------------------------- */

    --fp-font-family-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fp-font-size-xs: 0.75rem;
    --fp-font-size-sm: 0.875rem;
    --fp-font-size-md: 1rem;
    --fp-font-size-lg: 1.125rem;
    --fp-font-size-xl: 1.25rem;
    --fp-font-size-2xl: 1.5rem;
    --fp-font-size-3xl: 2rem;
    --fp-font-size-4xl: 2.5rem;
    --fp-font-size-5xl: 3rem;
    --fp-font-weight-regular: 400;
    --fp-font-weight-medium: 500;
    --fp-font-weight-semibold: 600;
    --fp-font-weight-bold: 700;
    --fp-font-weight-xbold: 800;
    --fp-line-height-tight: 1.2;
    --fp-line-height-heading: 1.3;
    --fp-line-height-body: 1.6;
    --fp-line-height-relaxed: 1.75;
    /* --------------------------------------------------------
       1.3 Spacing scale
       -------------------------------------------------------- */

    --fp-space-1: 0.25rem;
    --fp-space-2: 0.5rem;
    --fp-space-3: 0.75rem;
    --fp-space-4: 1rem;
    --fp-space-5: 1.25rem;
    --fp-space-6: 1.5rem;
    --fp-space-8: 2rem;
    --fp-space-10: 2.5rem;
    --fp-space-12: 3rem;
    --fp-space-16: 4rem;
    --fp-space-20: 5rem;
    --fp-space-24: 6rem;
    /* --------------------------------------------------------
       1.4 Border radius
       -------------------------------------------------------- */

    --fp-radius-sm: 0.375rem;
    --fp-radius-md: 0.625rem;
    --fp-radius-lg: 0.875rem;
    --fp-radius-xl: 1.25rem;
    --fp-radius-2xl: 1.5rem;
    --fp-radius-full: 999px;
    /* --------------------------------------------------------
       1.5 Border widths
       -------------------------------------------------------- */

    --fp-border-width: 1px;
    --fp-border-width-strong: 2px;
    /* --------------------------------------------------------
       1.6 Shadows
       -------------------------------------------------------- */

    --fp-shadow-sm: 0 1px 3px rgb(15 23 42 / 6%);
    --fp-shadow-md: 0 6px 20px rgb(15 23 42 / 8%);
    --fp-shadow-lg: 0 16px 40px rgb(15 23 42 / 12%);
    --fp-shadow-xl: 0 24px 60px rgb(15 23 42 / 16%);
    /* --------------------------------------------------------
       1.7 Layout
       -------------------------------------------------------- */

    --fp-content-width: 75rem;
    --fp-content-wide-width: 90rem;
    --fp-page-gutter: 1.5rem;
    --fp-header-height: 3.75rem;
    --fp-control-height: 3rem;
    /* --------------------------------------------------------
       1.8 Motion
       -------------------------------------------------------- */

    --fp-duration-fast: 150ms;
    --fp-duration-normal: 250ms;
    --fp-duration-slow: 400ms;
    --fp-ease-standard: ease;
    --fp-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --fp-transition-colors: color var(--fp-duration-normal) var(--fp-ease-standard), background-color var(--fp-duration-normal) var(--fp-ease-standard), border-color var(--fp-duration-normal) var(--fp-ease-standard);
    --fp-transition-interactive: transform var(--fp-duration-normal) var(--fp-ease-emphasized), box-shadow var(--fp-duration-normal) var(--fp-ease-standard);
    /* ========================================================
       2. BRAND TOKENS
       City-specific configuration.
       Current configuration: Sopot.
       Replace these values for another municipal deployment.
       ======================================================== */

    --fp-brand-accent: #0C3746;
    --fp-brand-accent-hover: #3A6E66;
    --fp-brand-accent-strong: #DE492D;
    --fp-brand-surface-soft: #EBFAF3;
    --fp-brand-surface-card: #C8E1D7;
    --fp-brand-surface-warm: #F7EEE9;
    /* ========================================================
       3. SEMANTIC TOKENS
       Describe the purpose of a value in the interface.
       Components should consume these instead of brand tokens.
       ======================================================== */
    /* 3.1 Text */

    --fp-text-primary: var(--fp-neutral-800);
    --fp-text-secondary: var(--fp-neutral-600);
    --fp-text-muted: var(--fp-neutral-500);
    --fp-text-inverse: var(--fp-neutral-0);
    /* 3.2 Surfaces */

    --fp-surface-page: var(--fp-neutral-0);
    --fp-surface-default: var(--fp-neutral-0);
    --fp-surface-subtle: var(--fp-brand-surface-soft);
    --fp-surface-raised: var(--fp-neutral-0);
    --fp-surface-hover: var(--fp-neutral-50);
    --fp-surface-highlight: var(--fp-brand-surface-warm);
    /* 3.3 Primary action */

    --fp-action-primary: var(--fp-brand-accent);
    --fp-action-primary-hover: var(--fp-brand-accent-hover);
    --fp-action-primary-active: var(--fp-brand-accent);
    --fp-action-primary-disabled: var(--fp-neutral-300);
    --fp-action-primary-text: var(--fp-neutral-0);
    --fp-action-primary-disabled-text: var(--fp-neutral-500);
    /* 3.4 Secondary action */

    --fp-action-secondary: var(--fp-brand-surface-card);
    --fp-action-secondary-hover: var(--fp-brand-surface-soft);
    --fp-action-secondary-text: var(--fp-brand-accent);
    /* 3.5 Accent action */

    --fp-action-accent: var(--fp-brand-accent-strong);
    --fp-action-accent-text: var(--fp-neutral-0);
    /* 3.6 Links */

    --fp-link-default: var(--fp-brand-accent);
    --fp-link-hover: var(--fp-brand-accent-hover);
    --fp-link-visited: var(--fp-neutral-700);
    /* 3.7 Borders and focus */

    --fp-border-default: var(--fp-neutral-200);
    --fp-border-subtle: var(--fp-neutral-100);
    --fp-border-emphasis: var(--fp-neutral-300);
    --fp-focus-ring: var(--fp-brand-accent-hover);
    /* 3.8 Feedback: informational */

    --fp-feedback-info-surface: #EFF6FF;
    --fp-feedback-info-text: #1D4ED8;
    --fp-feedback-info-border: #BFDBFE;
    /* 3.9 Feedback: success */

    --fp-feedback-success-surface: #F0FDF4;
    --fp-feedback-success-text: #166534;
    --fp-feedback-success-border: #BBF7D0;
    /* 3.10 Feedback: warning */

    --fp-feedback-warning-surface: #FFFBEB;
    --fp-feedback-warning-text: #92400E;
    --fp-feedback-warning-border: #FDE68A;
    /* 3.11 Feedback: danger */

    --fp-feedback-danger-surface: #FEF2F2;
    --fp-feedback-danger-text: #B91C1C;
    --fp-feedback-danger-border: #FECACA;
}


/* ============================================================
   4. GLOBAL ACCESSIBILITY BASELINE
   Applies regardless of the page or component.
   ============================================================ */

/* Visible keyboard focus */

:focus-visible {
    outline: 3px solid var(--fp-focus-ring);
    outline-offset: 3px;
}


/* Respect the operating system motion preference */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}