/* polskafranczyza.pl — design tokens (v3) */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');
/* Ikony: Phosphor Icons 2.1.1 (regular + duotone + fill) */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');

:root {
  /* Kolor */
  --pf-ink: #0E1116;        /* Atrament: tekst, tła premium, stopka, pasek kursów */
  --pf-ink-2: #2A2E35;      /* tekst akapitów */
  --pf-graphite: #4A4F57;   /* tekst pomocniczy, nieaktywna nawigacja */
  --pf-muted: #6E727A;      /* meta, podpisy, daty */
  --pf-muted-dark: #9AA0A8; /* meta na ciemnym tle */
  --pf-rule: #DCDAD3;       /* separatory 1px */
  --pf-rule-soft: #EDEBE6;  /* separatory wewnątrz list */
  --pf-paper: #F7F6F2;      /* tła sekcji */
  --pf-white: #FFFFFF;
  --pf-emerald: #0B5D4B;    /* JEDYNY kolor interakcji: przyciski, linki, etykiety */
  --pf-emerald-tint: #E7EFEB; /* tło kafli ikon duotone */
  --pf-emerald-row: #EEF4F1;  /* podświetlenie bieżącego kroku */
  --pf-mint: #34B88B;       /* akcent na ciemnym tle, wykresy dark */
  --pf-vermilion: #D9432B;  /* znak, ostrzeżenia, „nowy punkt” — max ~1% powierzchni */
  --pf-vermilion-text: #B8321E;
  --pf-up: #34B88B; --pf-down: #FF8466;      /* zmiany kursów na ciemnym */
  --pf-dark-surface: #161A21; --pf-dark-input: #1C2028; --pf-dark-border: #262B33; --pf-dark-border-2: #2F343D;
  --pf-mint-on-emerald: #BFD8CF; --pf-text-on-emerald: #DCEAE4;

  /* Typografia — wyłącznie Lato */
  --pf-font: 'Lato', system-ui, sans-serif;
  --pf-label: 700 11px/1.4 var(--pf-font);   /* + letter-spacing:.14em; text-transform:uppercase */

  /* Siatka */
  --pf-container: 1200px;  /* desktop: 1440 viewport, padding 120 */
  --pf-gutter-mobile: 16px;
  --pf-radius: 0;          /* ostre krawędzie; przyciski 2px; telefon/app-icon wyjątki */
  --pf-radius-btn: 2px;

  /* Ruch */
  --pf-ease-out: cubic-bezier(.2,.7,.2,1);
  --pf-ease-draw: cubic-bezier(.4,0,.2,1);
}

body { margin:0; font-family:var(--pf-font); color:var(--pf-ink); background:#fff; -webkit-font-smoothing:antialiased; }
a { color:var(--pf-emerald); text-decoration:none; } a:hover { color:var(--pf-ink); }

.pf-label { font:var(--pf-label); letter-spacing:.14em; text-transform:uppercase; color:var(--pf-emerald); }
.pf-section-head { border-bottom:2px solid var(--pf-ink); padding-bottom:14px; }
.pf-col-head { border-bottom:1px solid var(--pf-ink); padding-bottom:12px; font:var(--pf-label); letter-spacing:.14em; text-transform:uppercase; }
.pf-row { border-bottom:1px solid var(--pf-rule); }
.pf-btn { height:44px; padding:0 20px; background:var(--pf-emerald); color:#fff; font:700 14px var(--pf-font); border:0; border-radius:2px; display:inline-flex; align-items:center; gap:8px; }
.pf-btn--secondary { background:transparent; color:var(--pf-ink); border:1px solid var(--pf-ink); }
.pf-icon-tile { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--pf-emerald-tint); color:var(--pf-emerald); }
.pf-icon-tile--dark { background:var(--pf-ink); color:var(--pf-mint); }

/* Animacje — patrz README §7 */
@keyframes pf3wave  { 0%,100% { transform:scaleZ(.55) } 50% { transform:scaleZ(1) } }
@keyframes pf3grow  { from { transform:scaleY(0) } to { transform:scaleY(1) } }
@keyframes pf3growx { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes pf3draw  { from { stroke-dashoffset:1 } to { stroke-dashoffset:0 } }
@keyframes pf3fade  { from { opacity:0 } to { opacity:1 } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; } }