/* Wspólna baza i role. Header/footer zweryfikowane z Figmą; pozostałe układy rozwijamy osobno. */
:root {
  /* Tokeny bazowe. */
  --c-red: #e70000;
  --c-black-alpha-25: rgb(0 0 0 / 25%);
  --c-neutral-950-alpha-90: rgb(29 29 29 / 90%);
  --c-neutral-950-alpha-5: rgb(29 29 29 / 5%);
  --c-white: #fff;
  --c-neutral-25: #fafafa;
  --c-neutral-50: #f5f5f5;
  --c-neutral-300: #d4d4d4;
  --c-neutral-600: #525252;
  --c-neutral-950: #1d1d1d;
  --c-neutral-900: #2d2d2d;
  --c-neutral-950-alpha-0: rgb(29 29 29 / 0%);
  --c-white-muted: #fcfcfc;
  --c-neutral-950-alpha-75: rgb(29 29 29 / 75%);
  --c-neutral-950-alpha-50: rgb(29 29 29 / 50%);
  --c-neutral-950-alpha-15: rgb(29 29 29 / 15%);
  --c-neutral-950-alpha-25: rgb(29 29 29 / 25%);
  --c-white-alpha-75: rgb(255 255 255 / 75%);
  --c-white-alpha-5: rgb(255 255 255 / 5%);
  --c-white-alpha-25: rgb(255 255 255 / 25%);

  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-xs: 1.3;
  --line-height-sm: 1.4;
  --line-height-compact: 1.35;
  --line-height-md: 1.45;
  --line-height-lg: 1.5;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-full: 999px;
  --border-width-sm: 1px;
  --shadow-sm: 0 0.125rem 0.5rem rgb(0 0 0 / 8%);
  --container-content: 75rem;
  --container-reading: 48rem;
  --container-list: 62.5rem;
  --motion-fade-duration: 180ms;
  --motion-content-delay: 80ms;
  --z-base: 0;
  --z-header: 10;
  --z-overlay: 100;
  --z-modal: 200;
  --z-skip-link: 300;

  /* Role semantyczne: komponenty odwołują się przede wszystkim do nich. */
  --color-brand: var(--c-neutral-950);
  --color-image-shade: var(--c-black-alpha-25);
  --color-control-inverse: var(--c-white-alpha-5);
  --color-text: var(--c-neutral-950);
  --color-text-muted: var(--c-neutral-600);
  --color-surface: var(--c-white);
  --color-error: var(--c-red);
  --color-text-inactive: var(--color-text-secondary);
  --color-border-strong: var(--c-neutral-950-alpha-50);
  --color-backdrop-strong: var(--c-neutral-950-alpha-90);
  --color-required: var(--color-error);
  --color-placeholder: var(--c-neutral-950-alpha-50);
  --color-surface-tint: var(--c-neutral-950-alpha-5);
  --color-surface-page: var(--c-neutral-25);
  --color-border-subtle: var(--c-neutral-950-alpha-15);
  --color-surface-subtle: var(--c-neutral-50);
  --color-text-secondary: var(--c-neutral-950-alpha-75);
  --color-border-card: var(--c-neutral-950-alpha-25);
  --color-border: var(--c-neutral-300);
  --color-link: var(--color-brand);
  --color-scroll-track: var(--color-border-subtle);
  --color-scroll-thumb: var(--color-brand);
  --color-focus: var(--color-brand);
  --color-action: var(--color-brand);
  --color-action-hover: var(--c-neutral-600);
  --color-on-action: var(--c-white);
  --color-surface-inverse: var(--c-neutral-950);
  --color-text-inverse: var(--c-white);
  --color-text-inverse-secondary: var(--c-white-alpha-75);
  --color-header: var(--c-neutral-950-alpha-75);
  --color-backdrop: var(--c-neutral-950-alpha-50);
  --color-border-inverse: var(--c-white-alpha-25);

  --font-family-body: "Gotu", var(--font-family-system);
  --font-family-heading: "Headland One", Georgia, serif;
  --font-size-head-1: 1.5rem;
  --font-size-head-2: 2rem;
  --font-size-head-3: 1.5rem;
  --font-size-body-lg: 1.25rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-caption: 0.8125rem;
  --font-weight-heading: var(--font-weight-regular);
  --font-size-head-mobile-md: 1.75rem;
  --font-size-head-compact: 1.5rem;
  --font-size-head-5: var(--font-size-body-lg);
  --font-size-head-4: var(--font-size-head-compact);
  --letter-spacing-tight: -0.01em;
  --letter-spacing-heading: var(--letter-spacing-tight);
  --line-height-head-1: var(--line-height-md);
  --line-height-head-2: var(--line-height-md);
  --font-size-lead: var(--font-size-body);
  --letter-spacing-lead: normal;
  --font-family-summary: var(--font-family-heading);
  --font-size-summary: var(--font-size-body);
  --letter-spacing-summary: normal;
  --font-size-head-xs: var(--font-size-body);
  --font-size-title-sm: 1.125rem;

  --content-copy-width: 43.0625rem;
  --container-width: var(--container-content);
  --container-gutter: var(--space-5);
  --section-space: clamp(var(--space-7), 6vw, var(--space-9));
  --stack-space: var(--space-5);
  --cluster-space: var(--space-4);
  --grid-gap: var(--space-5);
  --control-height: 3.5rem;
  --control-radius: var(--radius-sm);
  --focus-width: 2px;
  --focus-offset: 3px;

  --color-hero: var(--color-text-inverse);
  --color-hero-base: var(--color-surface-inverse);
  --color-hero-end: var(--c-neutral-900);
  --color-badge: var(--c-white-alpha-25);
  --gradient-hero-angle: 254.5128deg;
  --gradient-hero-home-angle: var(--gradient-hero-angle);
  --gradient-hero-article-angle: var(--gradient-hero-angle);
  --gradient-hero-photo: linear-gradient(var(--gradient-hero-angle), var(--c-neutral-950-alpha-0) 19.565%, var(--color-hero-base) 80.435%);
  --gradient-hero-home-photo: linear-gradient(var(--gradient-hero-home-angle), var(--c-neutral-950-alpha-0) 19.565%, var(--color-hero-base) 80.435%);
  --gradient-hero-article-photo: linear-gradient(var(--gradient-hero-article-angle), var(--c-neutral-950-alpha-0) 19.565%, var(--color-hero-base) 80.435%);
  --gradient-hero-bottom: linear-gradient(180deg, var(--c-neutral-950-alpha-0) 44.143%, var(--color-hero-base) 93.068%);
  --gradient-hero-plain: linear-gradient(180deg, var(--color-hero-base), var(--color-hero-end));
  --hero-height: 37.5rem;
  --hero-height-home: var(--hero-height);
  --hero-height-article: var(--hero-height);
  --hero-content-width: var(--content-copy-width);
  --hero-content-home-width: 43.9375rem;
  --hero-content-article-width: 30.6875rem;
  --hero-content-brief-width: 36.8125rem;
  --hero-content-centered-width: 50rem;
  --gradient-page-card-angle: 250.0428deg;
  --gradient-page-card-wide-angle: var(--gradient-page-card-angle);
  --gradient-page-card: linear-gradient(var(--gradient-page-card-angle), var(--c-neutral-950-alpha-0) 19.565%, var(--color-surface-inverse) 80.435%);
  --gradient-page-card-wide: linear-gradient(var(--gradient-page-card-wide-angle), var(--c-neutral-950-alpha-0) 19.565%, var(--color-surface-inverse) 80.435%);
  --header-height: 5rem;
  --breadcrumb-offset: var(--space-4);
}

/* Wspólny próg desktopu zgodny z nawigacją; cała skala tekstu zmienia się centralnie. */
@media (min-width: 70rem) {
  :root {
    --font-family-summary: var(--font-family-body);
    --font-size-summary: var(--font-size-body-lg);
    --letter-spacing-summary: var(--letter-spacing-tight);
    --font-size-head-1: 3rem;
    --font-size-head-2: 2.5rem;
    --font-size-head-3: 2rem;
    --line-height-head-1: var(--line-height-xs);
    --line-height-head-2: var(--line-height-compact);
    --letter-spacing-heading: normal;
    --font-size-lead: var(--font-size-body-lg);
    --letter-spacing-lead: var(--letter-spacing-tight);
    --gradient-hero-angle: 224.4093deg;
    --gradient-page-card-angle: 246.6518deg;
    --gradient-page-card-wide-angle: 217.3039deg;
    --gradient-hero-home-angle: 228.8141deg;
    --gradient-hero-article-angle: 219.2257deg;
    --hero-height-home: 43.75rem;
    --hero-height-article: 31.25rem;
    --header-height: var(--space-9);
    --breadcrumb-offset: 0.875rem;
  }
}