/* ------------------------------------------------------------------
   Versola Engineering · Design tokens
   Single source of truth for color, type, spacing, radius, motion.
   Everything else in components.css and style.css references these.
   ------------------------------------------------------------------ */
:root {
  /* Color · neutral scale (warm-leaning, like leaders: Surf, AGIMA) */
  --ink-900: #141414;   /* headings, primary text */
  --ink-700: #3b3b3b;   /* body text */
  --ink-500: #6f6f6f;   /* secondary text */
  --ink-300: #a8a8a4;   /* placeholders, meta */
  --line-200: #e4e4e0;  /* borders */
  --line-100: #efefec;  /* subtle dividers */
  --surface-100: #f6f6f3; /* tinted sections, inputs */
  --paper: #ffffff;

  /* Color · one accent only. Used for primary action, links, key numbers. */
  --accent: #2f54ff;
  --accent-hover: #1f3fe0;
  --accent-soft: #e9edff;

  /* Color · case tints (pastel surfaces for project tiles; never for UI) */
  --tint-mint: #e3f4ea;
  --tint-peach: #fdebdf;
  --tint-lilac: #ebe7fb;
  --tint-sky: #e2f0fb;
  --tint-sand: #f3eddc;

  /* Color · inverse block */
  --inv-bg: #141414;
  --inv-text: #ffffff;
  --inv-mu: #a3a3a0;
  --inv-line: rgba(255,255,255,.12);

  /* Status */
  --ok: #138a4a;

  /* Type */
  --f-display: 'Inter Tight', 'Golos Text', system-ui, sans-serif;
  --f-body: 'Golos Text', 'Inter', system-ui, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --t-hero: clamp(38px, 5vw, 66px);   /* 1 per page */
  --t-h2: clamp(28px, 3.2vw, 44px);
  --t-h3: clamp(20px, 1.8vw, 24px);
  --t-h4: 18px;
  --t-lead: clamp(17px, 1.4vw, 20px);
  --t-body: 16px;
  --t-small: 14px;
  --t-meta: 12px;

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.55;

  --track-tight: -0.025em;
  --track-head: -0.02em;
  --track-meta: 0;

  /* Spacing · 4px base. Use only these. */
  --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;

  /* Section rhythm */
  --sec-y: var(--s-10);
  --sec-y-m: var(--s-8);

  /* Radius · exactly two sizes + pill */
  --r-sm: 6px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation · one soft shadow, used sparingly (hover, forms) */
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 12px 32px rgba(20,20,20,.08);

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --gap: var(--s-5);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 180ms;
}

@media (max-width: 720px) {
  :root { --sec-y: var(--s-8); --gutter: 20px; --gap: var(--s-4); }
}