@font-face{font-family:"Onest";src:url("fonts/Onest.woff2") format("woff2");
           font-weight:100 900;font-display:swap}
@font-face{font-family:"Golos Text";src:url("fonts/Golos.woff2") format("woff2");
           font-weight:100 900;font-display:swap}

/* The kit's tokens — every value the drawing kit paints with, in one place.

   The kit used to hard-code its greys. That was wrong in a way that only shows
   up on the second project: a board drawn in a stranger's ink is a board whose
   structure you are judging against a ground the product will never have. So
   the kit paints exclusively through these variables, and a project overrides
   them with values EXTRACTED FROM ITSELF.

   ── HOW A PROJECT BINDS ITS OWN ──────────────────────────────────────────
   Do not edit this file in a project. Copy the kit in byte for byte, then
   write ONE file of the project's own next to it and link it AFTER the skin:

       <link rel="stylesheet" href="../assets/board.css">
       <link rel="stylesheet" href="../tokens.project.css">   <- last wins

   `tokens.project.css` is `:root{ --kit-*: … }` and nothing else, and every
   value in it is read from the project — its language document, its CSS custom
   properties, its Tailwind config, its ThemeExtension — never invented here.
   phase-5-passes.md §5 names it as a slot; harness.md says how to extract it.

   ── THE THREE GROUPS, AND WHY THE LINE MATTERS ───────────────────────────
   GROUND      canvas, ink, rule, type. The product's, and pass 2 uses it.
               A board on the product's own ground reads in the contrast,
               weight and hierarchy the screen will actually have.

   ANNOTATION  the marks, the tooltip, the mode switch. These belong to the
               TOOL, not to the product — a project may tune them for legibility
               on its own ground, but they are not design decisions and they
               never carry meaning a reader has to learn.

   DRESS       accent, radius, elevation. Pass 3 ONLY. The defaults here are
               deliberately inert (no accent tint, zero radius) so that a board
               which has not reached pass 3 cannot accidentally look dressed.
               An undressed board is how you find out the structure carries the
               screen on its own; that check survives the ground being real. */

:root{
  /* ── GROUND — override every one of these from the project ───────────── */
  --kit-canvas:    #0B0E13;   /* the page the drawing sits on */
  --kit-surface:   #11161E;   /* a screen, a node, a raised block */
  --kit-ink:       #EEF0F4;   /* text, and anything the eye must land on */
  --kit-ink-2:     #9AA2B1;   /* a value, a secondary line */
  --kit-ink-3:     #6B7280;   /* labels, captions, the said-quietly register */
  --kit-ink-4:     #454C58;   /* chevrons, file paths, the nearly-absent */
  --kit-rule:      #2A313D;   /* the border of a thing */
  --kit-rule-soft: #1F242E;   /* the line BETWEEN things inside one thing */
  /* The real faces, not a system stack. ADR-0008 chose Onest for body and
     chrome and Golos Text for the display register, because the faces they
     replaced carried no Cyrillic — and until now every board drew in whatever
     the machine had, which is the same bug in the drawings. A board showing the
     wrong letterforms shows the wrong line lengths, weight and Cyrillic, which
     is most of what a reader is judging. Files: design/fonts/. */
  --kit-font:      "Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --kit-display:   "Golos Text","Onest",-apple-system,sans-serif;
  --kit-mono:      ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── ANNOTATION — the tool's own, not the product's ──────────────────── */
  --kit-mark:      #5B6472;   /* a mark, hovered (inspect: dashed) */
  --kit-mark-rest: #39424F;   /* a way out, at rest (flow: solid) */
  --kit-mark-hot:  #C7CDD8;   /* a way out, hovered */
  --kit-tip-bg:    #161B23;
  --kit-tip-ink:   #C7CDD8;
  --kit-tip-rule:  #5B6472;
  --kit-chrome:    #11161E;   /* the mode switch */
  --kit-warn:      #B9924B;   /* worth knowing — unreached, unclassified, owed */
  --kit-warn-rule: #5B4A2A;
  /* Two distances from the system, and they are NOT the same finding:

       DRIFT  a private piece — a real component, named, working, just living
              outside the system. It wears the product's PRIMARY, because it is
              a component: what is wrong is where it lives, not what it is.
       MISS   a part with no mark at all. Nobody named it, nothing draws it that
              anybody declared. Red, because there is nothing there to promote.

     Painting both red said the same thing about a piece somebody wrote well in
     the wrong place and a hole nobody noticed. */
  --kit-drift:      #4C6FD1;
  --kit-drift-rule: #2C3F73;
  --kit-miss:       #E5484D;
  --kit-miss-rule:  #6B2B2E;

  /* ── DRESS — pass 3 only; inert by default ───────────────────────────── */
  --kit-accent:      transparent;
  --kit-accent-ink:  var(--kit-ink);
  --kit-radius:      0;

  /* ── THE FRAMES — what a screen is shaped like on this platform ─────────
     These are MEASUREMENTS OF THE PRODUCT, not preferences. A board drawn at a
     width the product does not use is a board whose line lengths, column
     counts and wrapping are all somebody's guess — and every one of those is
     what a pass-2 board is read for. Take them from the code: the container's
     max-width, the gutter utility, the breakpoint the layout folds at. */
  --kit-phone-w:    300px;
  --kit-phone-h:    640px;
  --kit-web-w:      880px;    /* the content measure — the container's max-width */
  --kit-web-h:      620px;    /* the fold — content below it still draws */
  --kit-gutter:      16px;    /* the horizontal gutter on a narrow screen */
  --kit-gutter-wide: 24px;    /* and above the fold width */
  --kit-fold:       640px;    /* where the layout changes its mind */
}

@media (prefers-color-scheme: light){
  /* Only a fallback for a project that has not bound its ground yet: a kit
     defaulting to dark on a light-themed product is the same stranger's-ink
     problem in the other direction. A bound project overrides both.

     The selector stays a bare `:root` on purpose. A cleverer one — say
     `:root:not(.kit-bound)` — outranks the project's own `:root{}` on
     specificity, and then the fallback silently BEATS the binding no matter
     what order the files are linked in. That is a defect you find by measuring
     a rendered board, not by reading the stylesheet, which is the worst kind.
     Same specificity, later file wins: tokens.project.css is linked last. */
  :root{
    --kit-canvas:#FFFFFF; --kit-surface:#F6F7F9;
    --kit-ink:#0F1419; --kit-ink-2:#4A5563; --kit-ink-3:#8A95A3; --kit-ink-4:#B6BDC8;
    --kit-rule:#E4E7EC; --kit-rule-soft:#EEF0F3;
    --kit-mark:#8A95A3; --kit-mark-rest:#B6BDC8; --kit-mark-hot:#0F1419;
    --kit-tip-bg:#0F1419; --kit-tip-ink:#EEF0F4; --kit-tip-rule:#4A5563;
    --kit-chrome:#FFFFFF; --kit-warn:#A06800; --kit-warn-rule:#D8C08A;
    --kit-drift:#1F3A8A; --kit-drift-rule:#B9C6E8;
    --kit-miss:#C42B31; --kit-miss-rule:#E8B4B6;
  }
}