:root {
  /* ── Primitives · brand accent ── */
  --bc-green: oklch(60% 0.17 140);
  --bc-green-deep: oklch(50% 0.17 140);
  --bc-green-soft: oklch(60% 0.17 140 / 0.1);
  --bc-green-tint: oklch(60% 0.17 140 / 0.05);

  /* ── Primitives · dark grays (near-black scale, no pure black) ── */
  --gray-950: oklch(6% 0 0);
  --gray-900: oklch(10% 0 0);
  --gray-850: oklch(18% 0 0);

  /* ── Primitives · text ── */
  --ink: var(--gray-950);
  --body: oklch(15% 0 0);
  --muted: oklch(46% 0 0);
  --muted-2: oklch(58% 0 0);
  --stone: oklch(53% 0 0);
  --ash: oklch(65% 0 0);

  /* ── Primitives · borders ── */
  --line: oklch(80% 0 0);
  --line-strong: oklch(72% 0 0);

  /* ── Primitives · backgrounds ── */
  --bg: oklch(100% 0 0);
  --bg-soft: oklch(97% 0 0);
  --bg-dark: oklch(13% 0 0);

  /* ── Radius (engineering: 2px max, no pills) ── */
  --r-none: 0px;
  --r-xs: 1px;
  --r-sm: 2px;
  --r-full: 9999px;

  /* ── Typography · IBM Plex Sans (corporate, engineering) + IBM Plex Mono (board labels) ── */
  --font-display: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale ── */
  --font-size-display-xl: 48px;
  --font-size-display-lg: 36px;
  --font-size-heading-xl: 24px;
  --font-size-heading-md: 20px;
  --font-size-heading-sm: 18px;
  --font-size-card-title: 17px;
  --font-size-body: 16px;
  --font-size-body-sm: 15px;
  --font-size-subtitle: 18px;
  --font-size-caption-xs: 12px;
  --font-size-stat-mobile: 28px;
  --font-size-btn: 16px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 13px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.25;
  --leading-body: 1.5;
  --leading-caption: 1.43;

  /* ── Motion · duration ── */
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --dur-slow: 200ms;

  /* ── Icons ── */
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 28px;

  /* ── Corner square (signature NVIDIA motif) ── */
  --corner: 12px;

  /* ── Spacing ── */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-6: 6px;
  --space-sm: 8px;
  --space-10: 10px;
  --space-md: 12px;
  --space-14: 14px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-section: 64px;

  /* ── Layout ── */
  --max: min(92vw, 1600px);
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 44px;
  --content-narrow: 640px;
  --content-medium: 640px;
  --content-wide: 1120px;

  /* ═══ Semantic role layer ═══ */
  --accent: var(--bc-green);
  --accent-hover: var(--bc-green-deep);
  --accent-soft: var(--bc-green-soft);
  --accent-tint: var(--bc-green-tint);
  --on-accent: oklch(100% 0 0);
  --fg: var(--body);
  --fg-muted: var(--muted);
  --fg-disabled: var(--ash);
  --surface: var(--bg);
  --surface-soft: var(--bg-soft);
  --surface-dark: var(--bg-dark);
  --on-dark: oklch(100% 0 0);
  --on-dark-muted: oklch(100% 0 0 / 0.7);
  --canvas: var(--bg);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --focus-ring: 0 0 0 2px var(--accent);
}


