/* Hallmark · theme: Cobalt · cool near-white paper / grotesk sans / electric cobalt
 * Shared design tokens for herosys.com. Every page colour and font flows through
 * these names — no inline values in site.css.
 * Axes: paper band = cool light · display style = grotesk-sans · accent hue = cool */

:root {
  /* Surfaces */
  --color-paper:      oklch(98.5% 0.004 250);
  --color-paper-2:    oklch(96%   0.006 250);
  --color-paper-3:    oklch(93%   0.007 250);

  /* Structure */
  --color-rule:       oklch(91%   0.006 250);
  --color-rule-2:     oklch(85%   0.008 250);

  /* Text */
  --color-neutral:    oklch(46%   0.012 255);
  --color-muted:      oklch(45%   0.014 257);
  --color-ink-2:      oklch(34%   0.018 257);
  --color-ink:        oklch(24%   0.020 258);

  /* The one dark beat */
  --color-graphite:   oklch(22%   0.016 260);
  --color-graphite-2: oklch(26%   0.016 260);
  --color-on-graphite:        oklch(93% 0.008 250);
  --color-on-graphite-muted:  oklch(72% 0.012 255);
  --color-rule-graphite:      oklch(34% 0.016 260);

  /* Signal — lightness pulled to 53% so accent text and accent-ink buttons clear 4.5:1 */
  --color-accent:        oklch(53% 0.20 256);
  --color-accent-ink:    oklch(99% 0.004 250);
  --color-accent-dim:    oklch(53% 0.20 256 / 0.45);
  --color-accent-on-dark: oklch(74% 0.16 256);
  --color-focus:         oklch(53% 0.20 256);

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Spacing — 4 pt scale */
  --space-3xs: 0.125rem;
  --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-3xl: 6rem;

  /* Type scale — major third (1.25) */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-display:   clamp(2.5rem, 5vw + 0.5rem, 4.75rem);
  --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.25rem);

  /* Form */
  --radius-sm: 6px;
  --radius-md: 10px;
  --rule-hair: 1px;
  --shadow-lift: 0 1px 2px oklch(24% 0.02 258 / 0.05);
  --shadow-panel: 0 24px 48px -24px oklch(24% 0.02 258 / 0.35);

  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 65ch;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  600ms;

  /* Depth */
  --z-nav:     20;
  --z-palette: 50;
}