/* vibeaudit design tokens -- the single source of truth for both pages
   (index.html and success.html link this file; express.static serves it).
   Values are the approved set; do not add colors or radii ad hoc -- extend
   this file instead so the two screens can't drift apart again. */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600&family=Fraunces:ital,wght@1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* Paper-warm neutrals */
  --bg: #f7f6f2;
  --bg-alt: #f0eee7;
  --ink: #15140f;
  --ink-muted: #6e6c62;
  --ink-faint: #a5a296;
  --line: rgba(21, 20, 15, 0.1);
  --line-strong: rgba(21, 20, 15, 0.18);
  --surface: #ffffff;
  --surface-dark: #15140f;
  --on-dark: #f3f1e9;
  --on-dark-muted: #93917f;

  /* The brand accent. Three deliberate, size-graded UI roles and no others:
     (1) the tiny brand mark in the wordmark, (2) a single marker-highlight
     on the hero's key phrase, (3) the paid CTA fill. Never a general-purpose
     decoration color. --accent-glow below is not a fourth role -- it's the
     same accent at whisper opacity for one ambient blur, not a UI element. */
  --accent: #c7e635;
  --accent-ink: #2b3300; /* text color used on top of --accent */
  --accent-glow: rgba(199, 230, 53, 0.22); /* --accent at ~22% alpha */

  /* Failure / severity tags only */
  --danger: #b4553c; /* muted terracotta-red */
  --danger-bg: rgba(180, 85, 60, 0.09);

  /* Radii */
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --radius-xs: 6px; /* small tags/chips */

  /* Type */
  --font-display: "Inter Tight", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-serif: "Fraunces", serif; /* italic use only, for a single emotional line */
  --font-mono: "IBM Plex Mono", monospace; /* scores, labels, code -- ties to the product being a dev-facing tool */
}