/* PLAN MORE design tokens v1.0 · 11.11.2026 · źródło: planmore.tokens.json */
:root {
  --pm-black: #111111;
  --pm-gray-800: #2B2B2B;
  --pm-gray-600: #5C5C5C;
  --pm-gray-500: #707070;
  --pm-gray-300: #C8C8C8;
  --pm-gray-200: #E3E3E3;
  --pm-gray-100: #F0F0F0;
  --pm-off-white: #F7F7F7;
  --pm-white: #FFFFFF;
  --pm-accent: #76232F;
  --pm-danger-fg: #B42318;
  --pm-danger-bg: #FDECEA;
  --pm-danger-solid-fg: #FFFFFF;
  --pm-success-fg: #1E7A3C;
  --pm-success-bg: #E8F4EC;
  --pm-warning-fg: #8A5D00;
  --pm-warning-bg: #FFF4D6;
  --pm-info-fg: #1D4E89;
  --pm-info-bg: #E8F0FA;
  --pm-neutral-fg: #5C5C5C;
  --pm-neutral-bg: #F0F0F0;

  /* semantyczne */
  --pm-text: var(--pm-black);
  --pm-text-secondary: var(--pm-gray-800);
  --pm-text-muted: var(--pm-gray-600);
  --pm-text-caption: var(--pm-gray-500);
  --pm-text-inverse: var(--pm-white);
  --pm-section-number: var(--pm-accent); /* w CRM: var(--pm-text-muted) */
  --pm-bg-page: var(--pm-off-white);
  --pm-bg-surface: var(--pm-white);
  --pm-bg-subtle: var(--pm-gray-100);
  --pm-bg-inverse: var(--pm-black);
  --pm-border-strong: var(--pm-black);
  --pm-border: var(--pm-gray-300);
  --pm-border-subtle: var(--pm-gray-200);
  --pm-border-input: var(--pm-gray-500);
  --pm-focus: var(--pm-black);

  /* typografia */
  --pm-font-display: 'Gilda Display', 'Gilda Display Fallback', 'Times New Roman', Georgia, serif;
  --pm-font-sans: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pm-fs-display: 36px;  --pm-lh-display: 1.1;
  --pm-fs-h1: 32px;  --pm-lh-h1: 1.15;
  --pm-fs-h2: 28px;  --pm-lh-h2: 1.2;
  --pm-fs-h3: 20px;  --pm-lh-h3: 1.3;
  --pm-fs-lead: 18px;  --pm-lh-lead: 1.6;
  --pm-fs-body: 16px;  --pm-lh-body: 1.6;
  --pm-fs-small: 14px;  --pm-lh-small: 1.5;
  --pm-fs-caption: 12px;  --pm-lh-caption: 1.4;

  /* odstępy, promienie, linie */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 16px;
  --pm-space-4: 24px;
  --pm-space-5: 32px;
  --pm-space-6: 48px;
  --pm-space-7: 64px;
  --pm-space-8: 96px;
  --pm-space-9: 128px;
  --pm-radius-0: 0;
  --pm-radius-sm: 2px;
  --pm-border-width: 1px;
  --pm-border-width-emphasis: 2px;
  --pm-focus-width: 2px;
  --pm-focus-offset: 2px;
  --pm-control-h: 44px;
  --pm-container: 1200px;
  --pm-gutter: 16px;
  --pm-margin: 16px;
  --pm-measure: 70ch;
}

@media (min-width: 1024px) {
  :root {
    --pm-fs-display: 56px;
    --pm-fs-h1: 44px;
    --pm-fs-h2: 32px;
    --pm-control-h: 40px;
    --pm-gutter: 24px;
    --pm-margin: 64px;
  }
}

/* Klasy bazowe */
.pm-display, .pm-h1, .pm-h2 { font-family: var(--pm-font-display); font-weight: 400; font-style: normal; color: var(--pm-text); margin: 0; }
.pm-display { font-size: var(--pm-fs-display); line-height: var(--pm-lh-display); }
.pm-h1 { font-size: var(--pm-fs-h1); line-height: var(--pm-lh-h1); }
.pm-h2 { font-size: var(--pm-fs-h2); line-height: var(--pm-lh-h2); }
.pm-h3 { font: 600 var(--pm-fs-h3)/var(--pm-lh-h3) var(--pm-font-sans); margin: 0; }
.pm-body { font: 400 var(--pm-fs-body)/var(--pm-lh-body) var(--pm-font-sans); color: var(--pm-text); }
.pm-caption { font: 400 var(--pm-fs-caption)/var(--pm-lh-caption) var(--pm-font-sans); letter-spacing: .02em; color: var(--pm-text-muted); }
.pm-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: var(--pm-focus-width) solid var(--pm-focus); outline-offset: var(--pm-focus-offset); }
.pm-inverse :focus-visible, .pm-inverse:focus-visible { outline-color: var(--pm-white); }