/* Hedonic Intelligence — design tokens
   Editorial register (FT/Economist) × technical seriousness (HVS/Cushman PDF).
   Single source of truth for color, type, spacing. */

:root {
  /* Canvas — warm paper, not pure white */
  --paper: #F5F2EC;
  --paper-2: #EFEBE3;          /* subtle band/section shift */
  --paper-3: #E7E2D6;          /* hairline blocks */

  /* Ink — warm near-black, not pure */
  --ink: #171614;
  --ink-2: #2B2925;
  --ink-3: #4A463F;            /* secondary text */
  --ink-4: #76716A;            /* tertiary, captions */
  --ink-5: #A39E94;            /* footnote, disabled */

  /* Rules — calibrated to paper */
  --rule: #1716141A;           /* ~10% ink */
  --rule-2: #17161426;         /* ~15% ink */
  --rule-3: #17161440;         /* ~25% ink, emphasis */

  /* Accent — refined gold (HVS-style brass, never decoration) */
  --accent: #A8842B;
  --accent-ink: #6E561B;       /* on paper for body-size accent text */
  --accent-soft: #A8842B1A;    /* highlight wash for extraction spans */
  --accent-soft-2: #A8842B33;

  /* Signal colors — used exclusively in data viz, not chrome */
  --signal-up: #2F5D4F;        /* IVI improvement, promoter */
  --signal-down: #7A1F2B;      /* IVI degradation, detractor */
  --signal-neutral: #76716A;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — editorial, not SaaS */
  --t-display: clamp(48px, 6.4vw, 92px);
  --t-h1: clamp(36px, 4.4vw, 60px);
  --t-h2: clamp(28px, 3vw, 40px);
  --t-h3: 22px;
  --t-body: 17px;
  --t-body-sm: 15px;
  --t-cap: 13px;
  --t-mono-sm: 12px;
  --t-eyebrow: 11px;

  /* Leading */
  --lh-display: 1.02;
  --lh-h: 1.12;
  --lh-body: 1.55;
  --lh-tight: 1.35;

  /* Layout */
  --col: minmax(0, 1fr);
  --gutter: 32px;
  --pad-x: clamp(20px, 4vw, 64px);
  --measure: 64ch;
  --max: 1320px;

  /* Spacing — 4px base, but used as sectional rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --d-fast: 140ms;
  --d-med: 280ms;
  --d-slow: 520ms;
}

/* Reset — minimal, keeps form/button defaults predictable */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* Selection — paper appropriate */
::selection { background: var(--accent-soft-2); color: var(--ink); }

/* Focus — real, visible, accessible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Reduced motion — every animation has a static fallback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}