/* Design tokens — htcli landing page (Figma "Web" frame, 1920px) */

:root {
  color-scheme: dark;

  /* Surfaces (sampled 1:1 from the Figma frame) */
  --bg-black: #000000;
  --bg-page: #020202;
  --bg-panel: #0c0c0c;
  --bg-tint: #000a08;
  --bg-card: #0a1412;
  --bg-card-deep: #02100d;
  --bg-card-highlight: #041813;
  --bg-terminal: #020806;
  --bg-terminal-header: #03100c;
  --bg-eyebrow: #041611;

  /* Lines */
  --line-soft: #131313;
  --line-card: #1c2523;
  --line-terminal: #0e231c;
  --line-btn: #222826;
  --line-accent: #1fa881;
  --line-accent-dim: #14785c;

  /* Accent greens */
  --green: #1fa881;
  --green-text: #22c194;
  --green-bright: #24cd9d;
  --green-grad-top: #23c497;
  --green-grad-bottom: #147055;

  /* Text */
  --text-hi: #ffffff;
  --text-body: #848484;
  --text-muted: #848484;
  --text-faint: #5d6160;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Scale (1920 design px) */
  --max-width: 1776px;
  --gutter: 72px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --shadow-terminal: 0 30px 80px rgba(0, 0, 0, 0.55);
}