/* Roof-Rank design tokens — colors, type, spacing, radius.
   Source of truth: the approved Claude Design build (Brand Assets + Site prototype).
   Values are load-bearing — do not round or "simplify" any of them. */

:root {

  /* ---- Color: seven values, nothing else ---- */
  --color-ground:  #0A0D12; /* page background, inside of every input. Never text. */
  --color-ground-rgb: 10, 13, 18;
  --color-card:    #12161D; /* card and panel fill, one step off the ground */
  --color-inset:   #151A22; /* mockups and nested panels inside a card */
  --color-nested:  #171C24; /* one step deeper still — chips, rows, mini-mockups inside a card's inset */
  --color-active:  #1C222C; /* buttons, selected chips, stamps, hover fills */
  --color-primary: #94A3B8; /* PRIMARY — the one accent color. Eyebrow dots, rank bars, link underlines, glyph structure. */
  --color-primary-rgb: 148, 163, 184;
  --color-subject: #C7CDD8; /* card headings, subject stroke in benchmark glyphs */
  --color-subject-rgb: 199, 205, 216;
  --color-ink:     #F3F5F8; /* headlines, numbers, wordmark */
  --color-ink-rgb: 243, 245, 248;
  --color-muted:   #8A93A3; /* body copy and labels — 5.9:1 on ground */
  --color-faint:   #59606E; /* breadcrumb only, at 0.68rem and nothing else — 3.1:1 on ground */
  --color-caption: #6E7686; /* smallest captions inside decorative mockups only — between muted and faint */
  --color-recessed: #10141A; /* one step darker than ground — the "not a fit" column, recessed panels */
  --color-elevated-text: #E6E9EF; /* names and card headings one step softer than pure ink */

  /* ---- Typography ---- */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Layout ---- */
  --container-width: 1120px;
  --page-gutter:     32px;
  --grid-gap:        18px;

  /* ---- Radius: five values, nothing else ---- */
  --radius-card:   20px; /* outer card */
  --radius-nested: 14px; /* mockups and nested cards */
  --radius-inset:  12px; /* inset panels */
  --radius-control:11px; /* buttons and fields */
  --radius-pill:   999px;

  /* ---- Borders (depth is a border + a background step, never a shadow) ---- */
  --border-hairline:      rgba(255, 255, 255, 0.08);
  --border-hairline-soft: rgba(255, 255, 255, 0.05);
  --border-primary:       rgba(var(--color-primary-rgb), 0.35);
  --border-primary-soft:  rgba(var(--color-primary-rgb), 0.22);
  --border-primary-strong:rgba(var(--color-primary-rgb), 0.55);
}