/* ============================================================
   Pre/cision design tokens
   Adapted from pre-cision-design-system handoff (July 2026).
   Brand font is Neue Swiss (files not provided) — substituted
   Hanken Grotesk. Swap the @font-face here when files arrive.
   Serif (Source Serif 4) is the product-UI editorial voice seen
   in the Executive Suite screens (signal headlines, reports).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap");

:root {
  /* Brand */
  --brand-blue: #6ABBE5;
  --brand-pink: #EC005F;
  --brand-ink: #000000;
  --brand-gray: #777777;

  /* Blue ramp */
  --blue-100: #E7F4FB;
  --blue-200: #C4E4F5;
  --blue-400: #6ABBE5;
  --blue-600: #3E9CCF;
  --blue-800: #1E6E9C;

  /* Pink ramp */
  --pink-100: #FDE6EF;
  --pink-200: #F9BFD6;
  --pink-400: #EC005F;
  --pink-600: #C40050;

  /* Neutrals */
  --fg-1: #000000;
  --fg-2: #444444;
  --fg-3: #6E6E6E; /* a11y: darkened from brand #777 so small captions clear 4.5:1; logo tagline artwork keeps #787878 */
  --fg-inverse: #FFFFFF;
  --surface-page: #FFFFFF;
  --surface-subtle: #F6F8FA;
  --surface-card: #FFFFFF;
  --surface-ink: #0A0A0A;
  --border-1: #E4E7EA;
  --border-2: #CBD2D8;

  /* Semantic */
  --accent: var(--brand-pink);
  --accent-hover: var(--pink-600);
  --info: var(--brand-blue);
  --success: #1B9E62;
  --warning: #E58F00;
  --danger: #D62839;
  --text-body: var(--fg-2);
  --text-heading: var(--fg-1);
  --text-muted: var(--fg-3);
  --link: var(--brand-pink);
  --link-hover: var(--pink-600);
  --focus-ring: rgba(106, 187, 229, .55);

  /* Type */
  --font-sans: "Hanken Grotesk", "Neue Swiss", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-display: var(--font-sans);
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px;
  --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800;
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.55;
  --tracking-tight: -0.02em; --tracking-normal: 0;

  /* Space / radius / shadow */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(10, 10, 10, .05), 0 6px 24px rgba(10, 10, 10, .06);
  --shadow-pop: 0 8px 40px rgba(10, 10, 10, .14);
  --container-max: 1140px;

  /* Gradient system — brand blue/pink meshes */
  --grad-brand: linear-gradient(135deg, var(--blue-400) 0%, var(--pink-400) 100%);
  --grad-sky: linear-gradient(160deg, var(--blue-200) 0%, var(--blue-400) 55%, var(--blue-800) 100%);
  --grad-heat: linear-gradient(150deg, var(--pink-200) 0%, var(--pink-400) 60%, var(--pink-600) 100%);
  --grad-mesh-1: radial-gradient(120% 90% at 15% 10%, rgba(106, 187, 229, .9) 0%, transparent 55%), radial-gradient(110% 90% at 85% 25%, rgba(236, 0, 95, .75) 0%, transparent 60%), radial-gradient(130% 110% at 55% 95%, rgba(30, 110, 156, .9) 0%, transparent 65%), linear-gradient(135deg, #2B7FB8 0%, #B4256E 100%);
  --grad-mesh-dark: radial-gradient(90% 70% at 80% 10%, rgba(106, 187, 229, .5) 0%, transparent 55%), radial-gradient(110% 90% at 15% 90%, rgba(236, 0, 95, .45) 0%, transparent 60%), #0A0A0A;
  --grad-fade-ink: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, .75) 100%);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
button { font-family: var(--font-sans); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--pink-100); color: var(--brand-ink); }