/* Pet Path Violet — design tokens. Single source of truth for the site palette,
   type scale, spacing rhythm, radii and motion curves. */
:root{
  /* Ground and ink */
  --pp-bg:#FFFFFF;
  --pp-surface:#FAFAFB;
  --pp-sunken:#F4F4F6;
  --pp-border:#E7E7EC;
  --pp-border-strong:#D6D6DE;
  --pp-ink:#0F0F17;
  --pp-ink-soft:#3A3A47;
  --pp-ink-muted:#5A5A6B;
  --pp-ink-faint:#8A8A99;

  /* Accent — declared brand violet, flat, never a gradient */
  --pp-accent:#5B2E9D;
  --pp-accent-hover:#6D28D9;
  --pp-accent-active:#45217A;
  --pp-accent-tint:#F6F4FC;
  --pp-accent-tint-2:#EDE8F9;
  --pp-accent-tint-3:#DCD2F2;
  --pp-accent-soft:#BCA9E4;

  /* The single dark ground, used by the tracking hero */
  --pp-dark:#16121F;
  --pp-dark-2:#211A2E;
  --pp-dark-border:#332944;
  --pp-on-dark:#FFFFFF;
  --pp-on-dark-muted:#B5AEC4;

  /* Status — signals only, never brand */
  --pp-success:#16A34A;
  --pp-success-bg:#E8F6EE;
  --pp-warning:#D97706;
  --pp-warning-bg:#FDF1E3;
  --pp-error:#DC2626;
  --pp-error-bg:#FBEAEA;

  /* Type */
  --pp-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pp-fs-display:clamp(2.25rem,1.5rem + 2.9vw,3.5rem);
  --pp-fs-h1:clamp(2.125rem,1.5rem + 2.6vw,3.375rem);
  --pp-fs-h2:clamp(1.75rem,1.35rem + 1.75vw,2.625rem);
  --pp-fs-h3:clamp(1.3125rem,1.16rem + 0.65vw,1.75rem);
  --pp-fs-h4:clamp(1.0625rem,1.01rem + 0.3vw,1.25rem);
  --pp-fs-body:clamp(1rem,0.975rem + 0.13vw,1.0625rem);
  --pp-fs-sm:0.9375rem;
  --pp-fs-xs:0.8125rem;
  --pp-lh-display:1.05;
  --pp-lh-head:1.12;
  --pp-lh-body:1.65;
  --pp-tr-display:-0.03em;
  --pp-tr-head:-0.02em;
  --pp-tr-label:0.06em;
  --pp-measure:64ch;

  /* Spacing — low density, generous */
  --pp-xs:8px; --pp-sm:16px; --pp-md:24px; --pp-lg:48px; --pp-xl:80px; --pp-xxl:120px;
  --pp-section-y:clamp(56px,7.5vw,120px);
  --pp-gutter:clamp(20px,4vw,40px);

  /* Radii — one stated rule */
  --pp-r-sm:10px; --pp-r-md:18px; --pp-r-lg:28px; --pp-r-pill:999px;

  /* Elevation — always violet-tinted, never black */
  --pp-shadow-sm:0 2px 8px -2px rgba(69,33,122,.10);
  --pp-shadow-md:0 12px 28px -18px rgba(69,33,122,.22);
  --pp-shadow-lg:0 18px 40px -24px rgba(69,33,122,.28);
  --pp-shadow-xl:0 40px 80px -40px rgba(69,33,122,.35);
  --pp-ring:0 0 0 3px var(--pp-accent-tint-3);

  /* Motion */
  --pp-ease-spring:cubic-bezier(.32,.72,0,1);
  --pp-ease-out:cubic-bezier(.16,1,.3,1);
  --pp-dur-fast:180ms;
  --pp-dur:320ms;
  --pp-dur-slow:620ms;
}