/*
 * Design tokens — "Präzision & Reinheit".
 * Every colour, radius, shadow and motion value used anywhere on the site is
 * declared here once. Component CSS never invents its own timing or colour.
 */
:root {
  /* Brand */
  --pg-navy: #001227;
  --pg-navy-soft: #0f2742;
  --pg-navy-line: rgba(255, 255, 255, 0.15);
  --pg-green: #006c4a;
  --pg-green-hover: #00714e;
  --pg-green-press: #005137;
  --pg-mint: #85f8c4;
  --pg-mint-soft: #82f5c1;

  /* Surfaces */
  --pg-white: #ffffff;
  --pg-tint: #eef3fb;
  --pg-tint-soft: #f7f9fd;
  --pg-mint-tint: #eaf8f1;
  --pg-surface-variant: #d3e4fe;
  --pg-amber: #f59e0b;
  --pg-error: #ba1a1a;

  /* Text */
  --pg-ink: #001227;
  --pg-ink-soft: #44474d;
  --pg-on-navy: #ffffff;
  --pg-on-navy-soft: #d3e4fe;

  /* Lines */
  --pg-line: rgba(0, 18, 39, 0.1);
  --pg-line-strong: rgba(0, 18, 39, 0.18);

  /* Radii */
  --pg-r-sm: 8px;
  --pg-r-md: 12px;
  --pg-r-lg: 16px;
  --pg-r-xl: 20px;
  --pg-r-2xl: 24px;
  --pg-r-pill: 999px;

  /* Shadows */
  --pg-sh-sm: 0 1px 3px 0 rgba(15, 39, 66, 0.06), 0 1px 2px -1px rgba(15, 39, 66, 0.04);
  --pg-sh-md: 0 10px 25px -5px rgba(15, 39, 66, 0.08), 0 8px 10px -6px rgba(15, 39, 66, 0.04);
  --pg-sh-lg: 0 20px 30px -10px rgba(15, 39, 66, 0.16);
  --pg-sh-xl: 0 25px 50px -12px rgba(15, 39, 66, 0.25);

  /* Layout */
  --pg-max: 90rem;
  --pg-gutter: 1.25rem;
  --pg-section-y: 4rem;

  /* Type scale */
  --pg-display: clamp(2.25rem, 6vw, 5.5rem);
  --pg-h1: clamp(2.25rem, 5.5vw, 4.5rem);
  --pg-h2: clamp(1.875rem, 4vw, 3.5rem);
  --pg-h3: clamp(1.5rem, 2.6vw, 2.25rem);
  --pg-h4: 1.25rem;
  --pg-lead: 1.0625rem;
  --pg-body: 1rem;
  --pg-compact: 0.9375rem;
  --pg-small: 0.875rem;
  --pg-tiny: 0.8125rem;

  /* Motion — components reference these, never their own numbers */
  --pg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pg-dur-fast: 180ms;
  --pg-dur: 320ms;
  --pg-dur-slow: 720ms;
  --pg-stagger: 70ms;
}

@media (min-width: 640px) {
  :root { --pg-gutter: 2rem; --pg-section-y: 5rem; }
}
@media (min-width: 1024px) {
  :root { --pg-gutter: 3rem; --pg-section-y: 6rem; }
}