/* ==========================================================================
   FLOW EXPERTS — DESIGN SYSTEM & GLOBAL TOKENS (main.css)
   Wersja: Clean Corporate Flat Design (Zgodnie z UI strony)
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- NIENARUSZALNE PRYMITYWY MARKI --- */
  --brand-orange-hex: #e66839ff;
  --brand-orange-rgb: 230, 104, 57;
  --brand-blue-hex: #02347fff;
  --brand-blue-rgb: 2, 52, 127;

  /* --- PALETA POMOCNICZA (Neutralne odcienie korporacyjne) --- */
  --neutral-000: #ffffffff;
  --neutral-050: #fafafaff; /* Bardzo jasny szary do tła */
  --neutral-100: #f1f5f9ff; /* Tło szarych kart z oferty */
  --neutral-200: #e2e8f0ff;
  --neutral-300: #cbd5e1ff;
  --neutral-500: #64748bff;
  --neutral-600: #475569ff;
  --neutral-800: #1e293bff;
  --neutral-900: #0f172aff;
  --neutral-950: #070d19ff;

  /* --- TOKENY KOLORÓW SEMANTYCZNYCH (Płaski styl) --- */
  --color-canvas: var(--neutral-000);               /* Czyste białe tło główne */
  --color-surface: var(--neutral-000);              /* Tło białych sekcji */
  --color-surface-elevated: var(--neutral-100);     /* Tło szarych kart (Usługi/FBA) */
  --color-text-primary: var(--neutral-900);         /* Ciemny tekst nagłówków */
  --color-text-secondary: var(--neutral-600);       /* Tekst akapitów */
  
  /* Zmiana: Pomarańczowy jako główny akcent dla przycisków i wyróżnień */
  --color-brand: var(--brand-orange-hex);           
  --color-brand-hover: #eb4d14;                     /* Mocniejszy i żywszy pomarańcz na hover */
  --color-brand-secondary: var(--brand-blue-hex);   /* Granatowy jako wsparcie (ikony) */

  --color-text-inverse: var(--neutral-000);
  --color-border: var(--neutral-200);

  /* --- OBRAMOWANIA I PROMIENIE ZAOKRĄGLEŃ (FLAT DESIGN) --- */
  /* Zrzuty ekranu pokazują ostre rogi przycisków i kart */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 0px; /* Wyzerowane do ostrych kątów */
  
  --border-thin: 1px solid var(--color-border);
  --border-none: none;

  /* --- CIENIE --- */
  --shadow-none: none;
  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05); /* Używane ew. dla modali */

  /* --- OBSZARY DOTYKOWE (WCAG) --- */
  --touch-target: 48px;
  --touch-target-visual: 40px;

  /* --- TYPOGRAFIA --- */
  --font-sans: 'Inter', 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Montserrat', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* --- SYSTEM ODSTĘPÓW --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --container-max-width: 1320px; /* Szerszy kontener dopasowany do ekranu */
  --container-padding: var(--space-6);
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  
  --z-sticky: 100;
  --z-modal: 1000;
}

/* --- DARK MODE (Zaktualizowany pod nowy płaski styl) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: var(--neutral-950);
    --color-surface: var(--neutral-900);
    --color-surface-elevated: var(--neutral-800);
    --color-text-primary: var(--neutral-050);
    --color-text-secondary: var(--neutral-300);
    --color-border: var(--neutral-800);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: var(--neutral-950);
  --color-surface: var(--neutral-900);
  --color-surface-elevated: var(--neutral-800);
  --color-text-primary: var(--neutral-050);
  --color-text-secondary: var(--neutral-300);
  --color-border: var(--neutral-800);
}

/* --------------------------------------------------------------------------
   RESET & BAZA
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-brand); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-blue-hex); }

/* --------------------------------------------------------------------------
   FUNDAMENTY UI (Płaskie Przyciski i Karty)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

p { color: var(--color-text-secondary); margin-bottom: var(--space-4); }

/* Przyciski (Pomarańczowe, Ostre rogi, Płaskie) */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md); 
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

button:hover, .btn:hover {
  background-color: var(--color-brand-hover);
  color: var(--color-text-inverse);
}

/* Karty usług */
.surface-card {
  background-color: var(--color-surface-elevated);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: none;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}