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

   Imported by BOTH web properties:
     site/src/app.css   -> atlascybernetics.ai
     blog/src/app.css   -> blog.atlascybernetics.ai

   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. */
  /* Logo greys. The lockup's own colours, not the text ramp: the brand
     guidelines call the light-ground greys logo colours (2.93:1 and 1.82:1 on
     white — a logo is exempt from the text floor, a paragraph is not), so the
     artwork cannot read --t2/--t3, which the light theme darkens to clear WCAG
     AA. On the dark ground the two ramps happen to coincide; on paper they must
     not. lockup-artwork.test.js pins all four to assets/brand/. */
  --logo-word: #C9CCD4;
  --logo-tagline: #82868F;
  /* 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 */
  /* Benchmark chart series. Colour follows the MODEL: which checkpoint owns
     which slug, and the measured separations, live in
     site/src/lib/series-colors.js, which carries the same hexes as the var()
     fallback. series-contrast.test.js pins the two equal and measures each
     theme's block against its own grounds. */
  --series-copper: #ee6f2f;
  --series-steel:  #2f88ee;
  --series-teal:   #51cdb0;
  --series-rose:   #cd517a;
  --series-citron: #d5e88a;
  --series-sky:    #a1e0f7;
  /* ---- 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);
  /* The same four hues, for use as TEXT. Identical to the fill in the dark
     theme, darkened in the light theme so small text clears WCAG AA on white,
     on --bg2 and on --card-2. A fill keeps the fill token; only a colour that
     lands on a glyph reaches for the -text twin. */
  --ch-violet-text: var(--ch-violet);
  --ch-cyan-text:   var(--ch-cyan);
  --ch-green-text:  var(--ch-green);
  --ch-gold-text:   var(--ch-gold);
  --sx-text: var(--ch-violet-text);
  /* 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);
  color-scheme: dark;
}

/* Light theme. Chevron hues stay the mark's own. Ink, ground and accent-as-text
   invert so body copy and links still clear WCAG AA on paper. */
[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg2: #F4F5F7;
  --card: #FFFFFF;
  --card-2: #EEF0F3;
  --sunk: #F0F2F5;
  --border: #E1E4EB;
  --border-strong: #C9CDD6;
  --t1: #0F1216;
  --t2: #3A4049;
  /* 5.26 on --bg, 4.83 on --bg2, 4.61 on --card-2. The previous #73767D was
     4.2 on white, which the accessibility gate reads as a failure wherever it
     lands on small text. */
  --t3: #696C72;
  /* The light-ground logo greys, straight from the guidelines' colour table.
     These are the values the -ondark twins differ by, and the reason the
     artwork has its own tokens at all. */
  --logo-word: #9397A0;
  --logo-tagline: #BDC0C5;
  /* Chevron text. Lightness lowered, hue and saturation held, so the mark's
     colour survives the move to paper. Each clears 4.6:1 on white, on --bg2
     and on --card-2. The fill hues above are untouched: on a fill the ink is
     --bg, and it is the fill that has to stay the mark's own. */
  --ch-violet-text: #8040F1;
  --ch-cyan-text:   #1B7587;
  --ch-green-text:  #0C7A55;
  --ch-gold-text:   #8F640C;
  --accent: #662AF4;
  --accent-fill: #662AF4;
  --accent-fill-hover: #560DD3;
  --accent-deep: #4C1D95;
  --accent-soft: rgba(102, 42, 244, 0.10);
  /* 5.38 on --bg, 4.61 over its own 12% chip; #0B8A62 read 3.73 on the chip. */
  --green: #0A7956;
  --green-soft: rgba(11, 138, 98, 0.12);
  /* 5.26 on --bg, 4.61 on --card-2; #B07A12 read 3.26 on --card-2. */
  --amber: #90640F;
  --red: #C92D37;
  --red-soft: rgba(201, 45, 55, 0.10);
  --vllm: #C5CAD3;
  /* Benchmark chart series on paper. The dark set above is one hex per model
     and three of its six (teal 1.96, citron 1.33, sky 1.45) are under the 3:1
     non-text floor on white. Same six hue families, lightness lowered: each
     clears 4.6:1 on white and 4.0:1 on --card-2, and the set holds every
     separation bar the dark set holds against --accent, --green, --t2, --t3
     and the fallback grey (figures in site/src/lib/series-colors.js). */
  --series-copper: #a2672c;
  --series-steel:  #466dc1;
  --series-teal:   #2d5b4c;
  --series-rose:   #832837;
  --series-citron: #565200;
  --series-sky:    #005977;
  --shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.08);
  --shadow: 0 6px 24px rgba(15, 18, 22, 0.10);
  --shadow-lg: 0 18px 50px rgba(15, 18, 22, 0.14);
}