/* ProductPorter design tokens.
 * Anchored on the portal's existing identity so the marketing site and the product
 * read as one thing: #0000f2 electric blue as the accent, #c9d3fa periwinkle as the
 * brand wash (the portal's own app background), Geist throughout (one family: a mono
 * chip beside Geist headings read as a different typeface, which it was). Every colour and
 * font in site.css references a token here; nothing is inlined.
 */

:root {
  /* Surfaces */
  --color-paper:        oklch(98.5% 0.006 264);   /* cool near-white, not #fff */
  --color-brand-wash:   oklch(86% 0.055 272);     /* the portal's #c9d3fa */
  --color-ink:          oklch(18% 0.030 264);
  --color-ink-soft:     oklch(42% 0.024 264);
  --color-ink-faint:    oklch(58% 0.018 264);
  --color-on-accent:    oklch(99% 0.004 264);

  /* Accent — the portal's #0000f2 */
  --color-accent:       oklch(44% 0.306 264);
  --color-accent-hover: oklch(36% 0.288 264);
  --color-accent-quiet: oklch(44% 0.306 264 / 0.16);

  --color-rule:         oklch(88% 0.014 264);
  --color-rule-brand:   oklch(44% 0.306 264 / 0.28);
  --color-focus:        oklch(44% 0.306 264);

  /* Type */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* A tighter, more even ladder than the first pass: the display no longer towers
     over the section heads, and the lede sits just above body rather than competing
     with the headings. */
  --text-display: clamp(2.375rem, 3.6vw + 1.25rem, 3.5rem);
  --text-2xl:     clamp(1.625rem, 1.25vw + 1.2rem, 2.125rem);
  --text-lg:      clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  --text-md:      1rem;
  --text-sm:      0.9375rem;
  --text-xs:      0.8125rem;

  /* Space — 4pt scale */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 36rem;

  --rule-hair: 1px;
  --rule-thick: 3px;
  --radius: 6px;
  --radius-pill: 999px;

  --dur-short: 120ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}