/* PerfoState v3. Źródło: codex-next-steps.md, sekcja 3. Trzy warstwy. */
:root {
  /* 1. Baza. */
  --color-white: #fff;
  --color-graphite: #161616;
  --color-blue: #0076fd;
  --color-blue-aa: #0068df;
  --color-blue-hover: #005bc4;
  --color-blue-pressed: #004da6;
  --color-teal: #008f9a;
  --color-aqua: #00aab6;
  --color-coral: #fd582c;
  --color-surface: #f6f8fb;
  --color-muted: #586477;
  --color-line: #dce2e9;
  --color-line-strong: #768193;
  --color-green: #357151;
  --color-amber: #93651e;
  --color-red: #b13e35;
  --color-on-dark-muted: #c5ced8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --font-inter: Inter, Arial, sans-serif;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --elevation-menu: 0 16px 40px rgb(22 22 22 / 12%);
  --elevation-report: 0 12px 28px rgb(22 22 22 / 8%);
  /* 2. Role. Zachowane nazwy z v2, dokładniejsze aliasy dostępności. */
  --paper: var(--color-white);
  --ink: var(--color-graphite);
  --blue: var(--color-blue);
  --action: var(--color-blue-aa);
  --action-hover: var(--color-blue-hover);
  --action-active: var(--color-blue-pressed);
  --cta: var(--color-coral);
  --cta-text: var(--color-graphite);
  --cta-hover: #E5481D;
  --muted: var(--color-muted);
  --surface: var(--color-surface);
  --line: var(--color-line);
  --border-control: var(--color-line-strong);
  --on-dark: var(--paper);
  --on-dark-muted: var(--color-on-dark-muted);
  --success: var(--color-green);
  --warning: var(--color-amber);
  --error: var(--color-red);
  --focus: var(--blue);
  --content-width: 1344px;
  --grid-gap: var(--space-4);
  /* Wspólna rama od logo do CTA: 4% z każdej strony, minimum 16 px. */
  --page-gutter: max(var(--space-4), 4vw);
  --page-inset: max(var(--page-gutter), calc((100vw - var(--content-width)) / 2));
  --section-space: var(--space-24);
  --section-space-mobile: var(--space-16);
  --font-statement: var(--font-inter);
  --font-utility: var(--font-inter);
  --font-label: var(--font-inter);
  --font-home: 52px;
  --font-subpage: 58px;
  --font-long-offer: 50px;
  --font-section: 40px;
  --font-lead: 18px;
  --font-body: 16px;
  --font-small: 14px;
  --font-label-size: 12px;
  --weight-home: 600;
  --weight-statement: 550;
  --weight-body: 400;
  --weight-control: 550;
  --tracking-statement: -.035em;
  --leading-statement: 1.08;
  --leading-body: 1.6;
  /* 3. Komponenty. */
  --header-height: 72px;
  --header-glass-duration: 700ms;
  --header-scroll-duration: 320ms;
  --header-glass-radius: 0px;
  --header-glass-lift: 12px;
  --header-glass-padding: 16px;
  --header-glass-bg: rgb(255 255 255 / 50%);
  --header-glass-blur: 24px;
  --button-height: 50px;
  --button-bg: var(--action);
  --button-text: var(--paper);
  --button-radius: var(--radius-1);
  --button-pad-x: var(--space-6);
  --input-height: 50px;
  --input-bg: var(--paper);
  --input-border: var(--border-control);
  --input-radius: var(--radius-1);
  --card-image-ratio: 1.9;
  --card-radius: var(--radius-2);
  --proof-bg: #fff;
  --proof-border: #000;
  --report-shadow: var(--elevation-report);
  --brand-cut: 32px;
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-reveal: 520ms;
  --motion-draw: 1200ms;
  --motion-shift: 16px;
  --motion-stagger: 60ms;
  --motion-group: 4;
  --hero-dwell: 8000ms;
  --hero-crossfade: 700ms;
  --hero-feedback: 200ms;
  --hero-ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Menu: położenie i czasy przejść zachowane z poprzedniej nawigacji. */
  --menu-width: 640px;
  --menu-gap: 8px;
  --menu-radius: var(--radius-3);
  --menu-fade-in: 200ms;
  --menu-fade-out: 150ms;
  --menu-open: 220ms;
  --menu-close: 180ms;
}
@media (max-width: 960px) {
  :root { --header-height: 64px; --font-home: 36px; --font-subpage: 36px; --font-long-offer: 34px; --font-section: 30px; --brand-cut: 20px; }
}
@media (max-width: 420px) {
  :root { --font-home: 34px; --font-long-offer: 32px; }
}
@media (max-width: 360px) {
  :root { --font-home: 30px; --font-subpage: 28px; --font-long-offer: 28px; }
}