/* ==========================================================================
   PCMP Design Tokens
   Source of truth: brand logo (identity preserved). Hex canonical.
   ========================================================================== */

:root {
  /* --- Brand palette --- */
  --brand-blue: #285d82;
  --brand-blue-700: #20506f;
  --brand-blue-900: #1a4159;
  --brand-ink: #1e2a33;
  --brand-green: #9ec23b;
  --brand-green-600: #88aa2c;
  --brand-orange: #f58022;
  --brand-orange-600: #e5731a;

  /* --- Surfaces & neutrals --- */
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef2f7;
  --line: #e3e8ee;
  --line-strong: #d3dae3;
  --muted: #626e7c; /* AA on white (5.2) and on surface-2 tint (4.9) */

  /* --- Semantic --- */
  --color-bg: var(--surface);
  --color-text: var(--brand-ink);
  --color-text-muted: var(--muted);
  --color-primary: var(--brand-blue);
  --color-accent: var(--brand-orange);
  --color-success: var(--brand-green);

  /* Tints derived from brand hues (kept subtle, toward brand not "warm") */
  --tint-blue-050: color-mix(in oklch, var(--brand-blue) 6%, white);
  --tint-blue-100: color-mix(in oklch, var(--brand-blue) 12%, white);
  --tint-green-050: color-mix(in oklch, var(--brand-green) 14%, white);
  --tint-orange-050: color-mix(in oklch, var(--brand-orange) 12%, white);

  /* --- Typography --- */
  --font-display: "Satoshi", "Satoshi-fallback", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.15rem, 1.6rem + 2.6vw, 3.5rem);
  --text-hero: clamp(2.3rem, 1.4rem + 4.2vw, 5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.6;

  /* --- Spacing & rhythm --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 3rem);

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Shadows (soft, light theme) --- */
  --shadow-xs: 0 1px 2px rgba(30, 42, 51, 0.06);
  --shadow-sm: 0 4px 14px rgba(30, 42, 51, 0.07);
  --shadow-md: 0 14px 34px rgba(30, 42, 51, 0.1);
  --shadow-lg: 0 28px 60px rgba(30, 42, 51, 0.14);
  --shadow-blue: 0 18px 40px rgba(40, 93, 130, 0.22);
  --shadow-sticker: 0 10px 22px rgba(30, 42, 51, 0.16);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur-normal: 320ms;
  --dur-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-slow: 1ms;
  }
}