/* ============================================================
   pozyt.ai — design tokens
   Source: claude.ai/design project "pozyt.ai Design System"
   (colors_and_type.css, kept verbatim — do not edit by hand;
   sync from the design system project instead)
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --pz-brand-ink:        #1F2A44;
  --pz-brand-ink-hover:  #2A3858;
  --pz-brand-accent:     #C8852A;
  --pz-brand-accent-soft:#F4E4C4;

  /* ---------- Neutrals (warm) ---------- */
  --pz-bg:             #FAF8F5;
  --pz-surface:        #FFFFFF;
  --pz-surface-2:      #F2EFE9;
  --pz-border:         #E4DED2;
  --pz-border-strong:  #C9C0AD;
  --pz-text:           #1F2A44;
  --pz-text-muted:     #6B6557;
  --pz-text-subtle:    #9A917F;

  /* ---------- Semantic — solid / soft / text-on-soft ---------- */
  --pz-success:        #2F8F6D;
  --pz-success-soft:   #DCEDE3;
  --pz-success-text:   #1B5A43;

  --pz-warning:        #D49327;
  --pz-warning-soft:   #FAEBCB;
  --pz-warning-text:   #7A5212;

  --pz-danger:         #C8533F;
  --pz-danger-soft:    #F5D8D0;
  --pz-danger-text:    #7A2818;

  --pz-info:           #3D6E9C;
  --pz-info-soft:      #D7E4F0;
  --pz-info-text:      #1F4769;

  --pz-neutral:        #6B6557;
  --pz-neutral-soft:   #EAE5DB;
  --pz-neutral-text:   #3A352B;

  /* ---------- Severity (findings) ---------- */
  --pz-sev-critical:   var(--pz-danger);
  --pz-sev-high:       #E07A4A;       /* custom — between danger & warning */
  --pz-sev-medium:     var(--pz-warning);
  --pz-sev-low:        var(--pz-info);
  --pz-sev-info:       var(--pz-neutral);

  /* ---------- Charts / data-viz ----------
     One metric at a time is the default: the line is ink, the fill is
     ink at 10%. Ochre is NOT used in charts — it stays reserved for
     „pozyt proponuje". Action markers are info-blue so they read as
     annotation, not as an alert. */
  --pz-chart-line:     var(--pz-brand-ink);
  --pz-chart-area:     rgba(31, 42, 68, 0.10);
  --pz-chart-grid:     var(--pz-border);
  --pz-chart-axis:     var(--pz-text-subtle);
  --pz-chart-point:    var(--pz-brand-ink);

  /* Markers on a time axis: what WE did vs. when we measured. */
  --pz-chart-marker:         var(--pz-info);
  --pz-chart-marker-soft:    var(--pz-info-soft);
  --pz-chart-marker-measure: var(--pz-text-subtle);

  /* Categorical series — for comparing sources (GSC vs Analytics)
     or periods. Ordered by how often they are needed. */
  --pz-chart-series-1: var(--pz-brand-ink);
  --pz-chart-series-2: #3D6E9C;
  --pz-chart-series-3: #2F8F6D;
  --pz-chart-series-4: #B07A3C;

  /* Direction of change. Colour by whether it is GOOD, never by the raw
     sign — a falling `position` is an improvement. */
  --pz-chart-good: var(--pz-success);
  --pz-chart-bad:  var(--pz-danger);

  /* Koszyki pozycji — uporządkowana kategoria zamiast osi. Zielony → czerwony,
     wspólne dla treemapy, rozkładu i pigułki w tabeli. */
  --pz-chart-bucket-1: #2F8F6D;   /* 1-3   */
  --pz-chart-bucket-2: #7CA37A;   /* 4-10  */
  --pz-chart-bucket-3: #D8975A;   /* 11-20 */
  --pz-chart-bucket-4: #C8533F;   /* >20   */

  /* Seria porównawcza: „rok temu", benchmark, linie odniesienia. Celowo
     przygaszona — nigdy nie konkuruje z linią główną. */
  --pz-chart-compare:  #9A917F;

  /* Aktualizacje Google — PAS na osi czasu, nie kreska: aktualizacja ma
     rozciągłość. Śliwka czyta się jako „świat", wyraźnie osobno od atramentu
     (nasze dane), błękitu info (nasze działanie), szarości (nasz pomiar) i
     ochry („pozyt proponuje"). Kolor NIGDY nie niesie oceny — aktualizacja to
     kontekst, a od dobrze/źle jest werdykt. */
  --pz-chart-update:      #6E5A8C;
  --pz-chart-update-soft: #EDE7F3;

  /* Mapa cieplna retrievalu — sekwencyjna skala ATRAMENTOWA.
     Sekwencyjna, bo mierzona wielkość ma jeden kierunek (dalej ↔ bliżej), a nie
     dwa bieguny — skala dwukolorowa sugerowałaby „dobrze/źle", a dopasowanie
     fragmentu do frazy nie jest oceną. Skala jest rozjaśnieniem atramentu, więc
     mapa czyta się jako TE SAME dane co linia na wykresie, tylko rozłożone na
     siatkę. Ochra jest zarezerwowana dla „pozyt proponuje" i NIE MOŻE tu
     wystąpić — inaczej mapa udawałaby, że czeka na decyzję. */
  --pz-chart-heat-1: #E9EAEC;   /* najdalej  */
  --pz-chart-heat-2: #BCBFC7;
  --pz-chart-heat-3: #848A98;
  --pz-chart-heat-4: #50596D;
  --pz-chart-heat-5: #1F2A44;   /* najbliżej (= --pz-brand-ink) */
  /* Tekst na dwóch najciemniejszych stopniach. */
  --pz-chart-heat-on-dark: #FFFFFF;

  /* Stany szczerości udziału (brief 016, zakładka AI per temat).
     Mała próba = kreskowanie NA stopniu skali (liczba zostaje, werdykt nie);
     nie mierzone = kontur BEZ wypełnienia (nigdy najjaśniejszy stopień — ten
     czytałby się jak 0%); poza pakietem = przerywany wyciszony kontur na
     ciepłym neutralnym. Żaden z nich nie jest ochrą. */
  --pz-chart-hatch:            rgba(31, 42, 68, 0.22);
  --pz-chart-unmeasured:       #6B6557;
  --pz-chart-out-of-plan:      #9A917F;
  --pz-chart-out-of-plan-fill: #F2EFE9;
  /* Krawędź między tematami bliskimi znaczeniowo na mapie tematów. */
  --pz-chart-edge:             #C9C0AD;
  /* Kwadrant szans: duży popyt × mały udział w AI. */
  --pz-chart-priority-zone:    #FAEBCB;

  /* ---------- Type — families ---------- */
  --pz-font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --pz-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* ---------- Type — scale (size / line-height / weight) ---------- */
  --pz-text-xs:     11px;
  --pz-text-sm:     13px;
  --pz-text-base:   15px;
  --pz-text-md:     17px;
  --pz-text-lg:     20px;
  --pz-text-xl:     24px;
  --pz-text-2xl:    32px;

  --pz-lh-xs:       1.4;
  --pz-lh-sm:       1.5;
  --pz-lh-base:     1.55;
  --pz-lh-md:       1.45;
  --pz-lh-lg:       1.35;
  --pz-lh-xl:       1.3;
  --pz-lh-2xl:      1.2;

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

  /* ---------- Spacing (4-point) ---------- */
  --pz-space-1: 4px;
  --pz-space-2: 8px;
  --pz-space-3: 12px;
  --pz-space-4: 16px;
  --pz-space-5: 24px;
  --pz-space-6: 32px;
  --pz-space-7: 48px;
  --pz-space-8: 64px;

  /* ---------- Radius ---------- */
  --pz-radius-sm:   4px;
  --pz-radius-md:   8px;
  --pz-radius-lg:   12px;
  --pz-radius-full: 9999px;

  /* ---------- Shadows (subtle, tinted ink) ---------- */
  --pz-shadow-sm: 0 1px 2px  rgba(31, 42, 68, 0.06);
  --pz-shadow-md: 0 2px 8px  rgba(31, 42, 68, 0.08);
  --pz-shadow-lg: 0 8px 24px rgba(31, 42, 68, 0.10);

  /* ---------- Motion ---------- */
  --pz-ease:           cubic-bezier(0.4, 0.0, 0.2, 1);
  --pz-ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --pz-duration-fast:  120ms;
  --pz-duration-base:  200ms;
  --pz-duration-slow:  320ms;

  /* ---------- Layout ---------- */
  --pz-header-h:       48px;
  --pz-sidebar-w:      280px;
  --pz-tabs-h:         44px;
  --pz-content-maxw:   1200px;
}

/* ============================================================
   Semantic element styles (h1, p, code…)
   ============================================================ */

html, body {
  font-family: var(--pz-font-sans);
  font-size: var(--pz-text-base);
  line-height: var(--pz-lh-base);
  font-weight: var(--pz-weight-regular);
  color: var(--pz-text);
  background: var(--pz-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .pz-h1 {
  font-size: var(--pz-text-2xl);
  line-height: var(--pz-lh-2xl);
  font-weight: var(--pz-weight-bold);
  color: var(--pz-text);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .pz-h2 {
  font-size: var(--pz-text-xl);
  line-height: var(--pz-lh-xl);
  font-weight: var(--pz-weight-semibold);
  color: var(--pz-text);
  margin: 0;
}
h3, .pz-h3 {
  font-size: var(--pz-text-lg);
  line-height: var(--pz-lh-lg);
  font-weight: var(--pz-weight-semibold);
  color: var(--pz-text);
  margin: 0;
}
h4, .pz-h4 {
  font-size: var(--pz-text-md);
  line-height: var(--pz-lh-md);
  font-weight: var(--pz-weight-medium);
  color: var(--pz-text);
  margin: 0;
}
p, .pz-p {
  font-size: var(--pz-text-base);
  line-height: var(--pz-lh-base);
  color: var(--pz-text);
  max-width: 72ch;
  margin: 0;
  text-wrap: pretty;
}
small, .pz-small {
  font-size: var(--pz-text-sm);
  line-height: var(--pz-lh-sm);
  color: var(--pz-text-muted);
}
.pz-meta {
  font-size: var(--pz-text-xs);
  line-height: var(--pz-lh-xs);
  font-weight: var(--pz-weight-medium);
  color: var(--pz-text-muted);
}
code, kbd, .pz-code {
  font-family: var(--pz-font-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  background: var(--pz-surface-2);
  border-radius: var(--pz-radius-sm);
  color: var(--pz-text);
}
.pz-tabular {
  font-variant-numeric: tabular-nums;
}

/* Focus — always visible, brand-accent ring */
:where(button, a, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--pz-brand-accent);
  outline-offset: 2px;
}

/* Reduced motion — flatten everything */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}