/*
Theme Name: web-korki
Theme URI: https://web-korki.pl/
Author: Kamil Wojtalak
Description: Custom theme Fundacji web-korki. System komponentów inspirowany personal website Olgi (olgakotyk.com), ale nie 1:1 - bardziej redakcyjnie (typografia prowadzi, hero bez bloba, dowód-liczby w hero). Paleta własna: błękit + fiolet z logo, biel jako baza. Bez buildera.
Version: 0.4.0
Requires at least: 6.4
Requires PHP: 7.3
Text Domain: web-korki
*/

/*
  TOKENY DESIGNU

  Paleta wyprowadzona z logo (błękit #3090f0 + fiolet #6048f0) i z copy Olgi
  ("pastelowa, błękitno-niebiesko-biała"). Błękit prowadzi, fiolet to akcent,
  biel to baza. Wartości brandowe przyciemnione do poziomu, na którym tekst
  przechodzi kontrast AA - wszystkie pary sprawdzone (biały na brand-600 6:1,
  brand-600 na bieli 6:1, ink-700 na tle 10:1). Skóra siedzi tu; reszta
  (layout, komponenty) jest w assets/css/global.css i nie zna tych hexów.

  Nazwy ról zamiast nazw kolorów: paper (tła), brand (błękit), violet (fiolet
  akcent), ink (tekst). Wymiana palety = zmiana tych wartości, nic więcej.
*/

:root {
  /* Tła - chłodna biel do pastelowego błękitu */
  --paper-50:  #FBFCFF;   /* tło strony */
  --paper-100: #EEF3FC;   /* tło sekcji naprzemiennych */
  --paper-200: #DDE7F6;   /* obramowania */
  --paper-300: #C4D4EE;   /* ciemniejsze obramowanie / hover */

  /* Błękit - kolor wiodący (z logo) */
  --brand-200: #E6ECFB;   /* miękkie tło akcentu (chipy, blob light) */
  --brand-400: #9DB8F0;   /* blob za zdjęciem */
  --brand-600: #2E5AC6;   /* primary: przyciski, pasy, liczby, linki */
  --brand-800: #1F3E8F;   /* hover / ciemniejszy */

  /* Fiolet - drugi głos (z logo), akcent */
  --violet-50:  #EDE8FC;  /* pastelowe tło sekcji (fioletowy odcień) */
  --violet-500: #6048F0;  /* słowo-akcent w h1, drobne akcenty */
  --violet-600: #5138D6;

  /* Tekst */
  --ink-900: #16203A;     /* nagłówki */
  --ink-700: #333F5E;     /* treść */
  --ink-600: #505B76;     /* eyebrow / małe wersaliki - przechodzi AA na tintach */
  --ink-500: #616E90;     /* wyciszony: labelki na bieli */
  --ink-300: #9AA6C4;     /* bardzo wyciszony */

  /* Cienie - kolor z ink-900, spójna skala */
  --shadow-card:     0 8px 24px rgba(22, 32, 58, 0.08);
  --shadow-hover:    0 16px 40px rgba(22, 32, 58, 0.12);
  --shadow-portrait: 0 24px 60px rgba(22, 32, 58, 0.15);

  /* Ruch */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 180ms;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;

  /* Typografia - Manrope (jak u Olgi), stack systemowy jako fallback */
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}