/* Paidology design tokens: Direction A, "Signal". Use these in Framer as color styles and text styles. */
:root {
  /* Color */
  --ink: #0B1020;          /* page background */
  --panel: #121A30;        /* alternate sections, cards */
  --line: #26304A;         /* borders, dividers */
  --text: #EEF1F7;         /* primary text */
  --text-soft: #B8C0D0;    /* body copy on dark */
  --text-muted: #9AA4B8;   /* labels, meta */
  --signal: #C8FF3D;       /* the one accent: CTAs, kickers, triangles */
  --signal-hover: #E4FF9E;

  /* Type */
  --font-sans: 'Space Grotesk', system-ui, sans-serif;  /* headings and body */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* kickers, labels, buttons in nav */

  /* Type scale (desktop) */
  --h1: clamp(48px, 6.5vw, 88px);   /* weight 600, letter-spacing -0.035em, line-height 0.98 */
  --h2: clamp(36px, 4.5vw, 56px);   /* weight 600, letter-spacing -0.03em, line-height 1.02 */
  --h3: 26px;                       /* weight 600 */
  --body-lg: 20px;                  /* line-height 1.5 */
  --body: 17px;                     /* line-height 1.55 */
  --kicker: 12px;                   /* mono, uppercase, letter-spacing 0.14em */

  /* Layout */
  --max-width: 1200px;
  --gutter: 32px;
  --section-pad: 112px;

  /* Shape: square corners everywhere; triangles are the only motif. No circles. */
  --radius: 0;
}