/* =============================================================================
   Atlas design tokens — the single authoritative copy.

   Imported by BOTH web properties:
     site/src/app.css   -> atlasinference.io
     blog/src/app.css   -> blog.atlasinference.io

   Values come from the brand reference (etc/site-blog): ground #0F1216 is the
   only dark background the guidelines allow, the text ramp is anchored on the
   two brand grays, and the four chevron colours are the mark's own. Nothing
   here may be duplicated into a property's stylesheet — a second copy is the
   thing this file exists to prevent.
   ========================================================================== */
:root {
  /* canvas + surfaces — lightness stepped off the ground, hue preserved */
  --bg: #0F1216;          /* the only dark ground */
  --bg2: #141821;         /* deeper — alt sections, insets */
  --card: #191E27;        /* raised card / receipt stock */
  --card-2: #1F252F;      /* a card on a card */
  --sunk: #0A0C0F;        /* recessed — terminals, code, filename tabs */
  /* Hairlines. Solid rather than translucent, because these are used as fills
     in a few places as well as borders, and a translucent fill over a
     translucent section composites twice. The values are the reference's
     rgb(201 204 212 / .11) and / .18 flattened onto the ground. */
  --border: #24262B;
  --border-strong: #303338;
  /* ink — the reference ramp. Contrast on --bg: 15.1 / 11.7 / 5.2. */
  --t1: #E4E7EC;          /* headings */
  --t2: #C9CCD4;          /* body */
  --t3: #82868F;          /* metadata. The tightest token on the page: the
                             chevron field's amplitude is solved against it. */
  /* accent + signals
     One accent hue, three tokens, because a single violet cannot be optimal
     both as text on a dark canvas and as a fill under white. --accent is the
     brand violet and the text value; --accent-fill is the button value, deep
     enough to carry white; --accent-fill-hover deepens further, so white gains
     contrast on hover rather than losing it. */
  --accent: #BE9DF8;            /* links, labels, anything read as text */
  --accent-fill: #662af4;       /* solid backgrounds carrying white text */
  --accent-fill-hover: #560dd3;
  --accent-deep: #D7C4FC;       /* brighter still: emphasis on a dark canvas */
  --accent-soft: rgba(190, 157, 248, 0.16);
  --green: #12B981;             /* verify */
  --green-soft: rgba(18, 185, 129, 0.14);
  --amber: #EFB338;
  /* Used as TEXT on dark surfaces, and as a fill only with --bg ink. */
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --grad: linear-gradient(135deg, #D4C0FB 0%, #8E63F0 100%);
  --bar: linear-gradient(90deg, #D4C0FB, #BE9DF8);
  --vllm: #3A4049;              /* the other engine's chart series */
  /* ---- the mark, as the page's grammar --------------------------------
     The logo is three chevrons in four colours. Each colour is given one
     fixed meaning and nothing else may use it: violet = engine, cyan =
     silicon, green = verified, gold = community. Sections set --sx to their
     colour; the ledger rail, chips and chart series read --sx and follow.
     As TEXT all four clear 4.5:1 on --bg and on --card. As a FILL they carry
     --bg ink, never white — white on gold is 1.88:1. */
  --ch-violet: #BE9DF8;
  --ch-cyan:   #49C3DB;
  --ch-green:  #12B981;
  --ch-gold:   #EFB338;
  --sx: var(--ch-violet);
  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  /* elevation — on a dark canvas, shadow reads as depth only when it is black */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow: 0 6px 24px rgba(0,0,0,0.42);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.55);
}