/* =========================================================================
   Zwinnie - Design Tokens
   Źródło prawdy: docs/DESIGN_SYSTEM.md (Faza 3, Design).
   Wartości spójne 1:1 z tabelą palety, typografii i spacingu w DESIGN_SYSTEM.md.
   Kierunek: czysty, jasny, minimalistyczny B2B. Baza jasna + opcjonalny tryb ciemny.
   Konwencja: teksty do odbiorcy - myślnik "-", nie pauza.
   ========================================================================= */

:root {
  /* --- Paleta: jasna baza (domyślna) - ciepła neutralna (stone) --- */
  --zwinnie-bg:              #FCFBFA;
  --zwinnie-surface:         #FFFFFF;
  --zwinnie-surface-alt:     #F6F4F1;
  /* Hero stoi poza zebrą sekcji - ciepły tint odróżnia je odcieniem, nie jasnością,
     żeby nie sklejało się wizualnie z pierwszym pasem zebry (surface-alt). */
  --zwinnie-surface-hero:    #FAF0E8;
  --zwinnie-text:            #1C1917;
  --zwinnie-text-muted:      #57534E;
  --zwinnie-text-subtle:     #78716C;
  --zwinnie-border:          #E7E3DE;
  --zwinnie-border-strong:   #D3CDC6;

  /* --- Akcent (Zwinnie Orange - wytrawny burnt/amber) --- */
  --zwinnie-accent:          #C2410C;
  --zwinnie-accent-hover:    #9A3412;
  --zwinnie-accent-active:   #7C2D12;
  --zwinnie-accent-contrast: #FFFFFF;
  --zwinnie-accent-subtle:   #FDF0E9;
  --zwinnie-accent-border:   #EDBDA1;

  /* --- Stany funkcjonalne --- */
  --zwinnie-success:         #1E7D4F;
  --zwinnie-success-subtle:  #E4F3EA;
  --zwinnie-warning:         #A16207;
  --zwinnie-warning-subtle:  #FAF0DC;
  --zwinnie-error:           #C0392B;
  --zwinnie-error-subtle:    #FBE7E4;
  --zwinnie-focus:           #C2410C;

  /* --- Typografia: rodziny --- */
  --zwinnie-font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --zwinnie-font-mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo,
                       Consolas, "Liberation Mono", monospace;

  /* --- Typografia: skala rozmiarów (baza 16px, ~1.25) --- */
  --zwinnie-fs-display: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); /* 40->56 */
  --zwinnie-fs-h1:      clamp(2.25rem, 1.7rem + 1.8vw, 2.75rem); /* 36->44 */
  --zwinnie-fs-h2:      clamp(1.75rem, 1.4rem + 1.1vw, 2rem);    /* 28->32 */
  --zwinnie-fs-h3:      1.5rem;   /* 24 */
  --zwinnie-fs-h4:      1.25rem;  /* 20 */
  --zwinnie-fs-lead:    1.25rem;  /* 20 */
  --zwinnie-fs-body:    1rem;     /* 16 */
  --zwinnie-fs-sm:      0.875rem; /* 14 */
  --zwinnie-fs-xs:      0.75rem;  /* 12 */

  /* --- Typografia: wagi --- */
  --zwinnie-fw-regular:  400;
  --zwinnie-fw-medium:   500;
  --zwinnie-fw-semibold: 600;
  --zwinnie-fw-bold:     700;

  /* --- Typografia: interlinia, tracking, measure --- */
  --zwinnie-lh-tight:    1.15;
  --zwinnie-lh-heading:  1.25;
  --zwinnie-lh-body:     1.6;
  --zwinnie-ls-tight:    -0.02em;
  --zwinnie-ls-normal:   0;
  --zwinnie-ls-wide:     0.06em;
  --zwinnie-measure:     68ch;

  /* --- Layout: szerokości --- */
  --zwinnie-container:        1200px;
  --zwinnie-container-narrow: 760px;
  --zwinnie-gutter:           24px;

  /* --- Spacing scale (baza 8px) --- */
  --zwinnie-space-1:  4px;
  --zwinnie-space-2:  8px;
  --zwinnie-space-3:  12px;
  --zwinnie-space-4:  16px;
  --zwinnie-space-5:  24px;
  --zwinnie-space-6:  32px;
  --zwinnie-space-8:  48px;
  --zwinnie-space-10: 64px;
  --zwinnie-space-12: 96px;
  --zwinnie-space-16: 128px;

  /* --- Promienie --- */
  --zwinnie-radius-sm:   6px;
  --zwinnie-radius-md:   10px;
  --zwinnie-radius-lg:   16px;
  --zwinnie-radius-pill: 999px;

  /* --- Cienie (jasna baza) --- */
  --zwinnie-shadow-sm: 0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.04);
  --zwinnie-shadow-md: 0 4px 12px rgba(28,25,23,.08), 0 2px 4px rgba(28,25,23,.04);
  --zwinnie-shadow-lg: 0 12px 32px rgba(28,25,23,.10);
}

/* =========================================================================
   Tryb ciemny (opcjonalny) - alternatywa, nie tożsamość marki.
   Nadpisuje wyłącznie tokeny zależne od trybu (kolory + cienie).
   ========================================================================= */

:root[data-theme="dark"] {
  /* Paleta: ciemna baza - ciepła neutralna */
  --zwinnie-bg:              #1A1613;
  --zwinnie-surface:         #221D19;
  --zwinnie-surface-alt:     #2A241F;
  --zwinnie-surface-hero:    #2E2018;
  --zwinnie-text:            #F5F1EC;
  --zwinnie-text-muted:      #B8AEA4;
  --zwinnie-text-subtle:     #8A8078;
  --zwinnie-border:          #363029;
  --zwinnie-border-strong:   #4A4239;

  /* Akcent (rozjaśniony pomarańcz - kontrast na ciemnym tle) */
  --zwinnie-accent:          #FB923C;
  --zwinnie-accent-hover:    #FDBA74;
  --zwinnie-accent-active:   #F97316;
  --zwinnie-accent-contrast: #221008;
  --zwinnie-accent-subtle:   #3A2213;
  --zwinnie-accent-border:   #7C3A1A;

  /* Stany funkcjonalne */
  --zwinnie-success:         #3FB477;
  --zwinnie-success-subtle:  #123024;
  --zwinnie-warning:         #D9A441;
  --zwinnie-warning-subtle:  #33290F;
  --zwinnie-error:           #E4685A;
  --zwinnie-error-subtle:    #331A17;
  --zwinnie-focus:           #FB923C;

  /* Cienie (subtelniejsze na ciemnym tle) */
  --zwinnie-shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --zwinnie-shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --zwinnie-shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}

/* Tryb auto: dziedziczy preferencję systemu, o ile nie wymuszono data-theme.
   [data-theme="light"] zawsze wygrywa i zostaje przy jasnej bazie. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zwinnie-bg:              #1A1613;
    --zwinnie-surface:         #221D19;
    --zwinnie-surface-alt:     #2A241F;
    --zwinnie-surface-hero:    #2E2018;
    --zwinnie-text:            #F5F1EC;
    --zwinnie-text-muted:      #B8AEA4;
    --zwinnie-text-subtle:     #8A8078;
    --zwinnie-border:          #363029;
    --zwinnie-border-strong:   #4A4239;

    --zwinnie-accent:          #FB923C;
    --zwinnie-accent-hover:    #FDBA74;
    --zwinnie-accent-active:   #F97316;
    --zwinnie-accent-contrast: #221008;
    --zwinnie-accent-subtle:   #3A2213;
    --zwinnie-accent-border:   #7C3A1A;

    --zwinnie-success:         #3FB477;
    --zwinnie-success-subtle:  #123024;
    --zwinnie-warning:         #D9A441;
    --zwinnie-warning-subtle:  #33290F;
    --zwinnie-error:           #E4685A;
    --zwinnie-error-subtle:    #331A17;
    --zwinnie-focus:           #FB923C;

    --zwinnie-shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --zwinnie-shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --zwinnie-shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  }
}

/* Redukcja ruchu - dostępność (WCAG, prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}