/*
  typif.ai design tokens — canonical source.
  Consumed by ../index.html and ../style-guide.html via <link rel="stylesheet">.
  Mirrored by hand in tokens.json for non-CSS contexts (Salesforce, mobile, Figma).
  Keep the two files in sync manually — see brand-guide.md, "File & Token Reference".
*/

:root {
  /* Core brand colors — fixed, do not change without updating brand-guide.md */
  --ink: #16181D;
  --paper: #ECE8DE;
  --signal: #FF4A2E;
  --code: #9FA8FF;
  --muted: #9A9C9F;

  /* Channel triplets, for rgba() alpha-blends without relative-color CSS syntax */
  --ink-rgb: 22, 24, 29;
  --paper-rgb: 236, 232, 222;
  --signal-rgb: 255, 74, 46;

  /* Neutral ramp — elevated dark surfaces, same cool ~223° hue family as --ink */
  --ink-2: #1F2229;
  --ink-3: #282B34;
  --muted-2: #636569;

  /* Solution-area accents — pastel siblings of --code (same S100/L81 formula, rotated hue).
     --signal is reserved for the core brand mark only; never use it as a per-area accent. */
  --accent-appdev: #9EEFFF;
  --accent-crm: #FFE79E;
  --accent-sports: #9EFFCF;

  /* Typography — two typefaces only */
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* UI corner-radius scale (unrelated to the icon tile's 0.2031 ratio, which is SVG geometry) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}