/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL KIT — TOKENS
   ══════════════════════════════════════════════════════════════════════════
   One file, imported by admin.css and app.css, so "what colour is a line" has
   a single answer.

   Measuring the two stylesheets first found 22 tokens declared in both, and
   15 of them with DIFFERENT values. That split into two kinds, and the
   difference matters more than the count:

     accidental — --ok was #059669 in admin and #12a150 on the front end. Both
                  are "success green". Nobody decided they should differ; they
                  were typed at different times. Six colour tokens differ by
                  less than 12/255, which is the same story.

     deliberate — --bg is #f0f2f7 in admin and #ffffff on the front end. The
                  admin is grey so panels read as panels; a website's canvas is
                  white. --fs-md is 13.5px against 17px because a dense tool and
                  a page you read are not the same problem.

   So this file holds what is genuinely SHARED, and each side keeps a small
   surface layer for what is genuinely its own. Collapsing the deliberate
   differences would not be unification, it would be making the admin harder to
   scan in order to win a number.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ink ───────────────────────────────────────────────────────────────
     The admin and front-end values were within 7/255 of each other. Taking one
     pair is not a visual change anyone can see; keeping two was only ever an
     accident of typing. */
  --ink:        #14171d;
  --ink-2:      #3a4049;
  --muted:      #6a7180;
  --faint:      #9aa1ac;

  /* ── Lines ─────────────────────────────────────────────────────────────
     --line was 9/255 apart and is unified. --line-2 was 19/255 apart, which is
     visible, and the admin's darker rule earns its keep in a dense table — so
     it stays a per-surface value below rather than being averaged away. */
  --line:       #e8eaee;

  /* ── State ─────────────────────────────────────────────────────────────
     Four greens, two reds and two ambers existed across the two files with no
     reason for any of the pairs to differ. */
  --ok:         #12a150;
  --warn:       #d97706;
  --err:        #dc2626;
  --info:       #2563eb;

  /* ── Radius ────────────────────────────────────────────────────────────
     A scale rather than a set of numbers, so "slightly rounder" is a step and
     not a new value invented at the call site. */
  --r-xs:       6px;
  --r-sm:       8px;
  --r:          12px;
  /* 14px, not 16px. The token said 16 while admin.css redeclared it as 14
     TWICE and the later declaration won, so 120 admin screens have been
     rendering 14px all along. Settling on what already renders means the
     unification changes nothing on the side that carries the weight. */
  --r-lg:       14px;
  --r-pill:     999px;

  /* ── Spacing ───────────────────────────────────────────────────────────
     Corrected in 11.323. The first version of this scale was 4/8/12/16/20/24 —
     a tidy 4px step, and wrong for this codebase. Counting every literal
     spacing declaration in both stylesheets:

       admin.css   gap:8px x95   gap:10px x85   gap:6px x62   gap:12px x33
       app.css     16px x75   10px x70   8px x67   14px x61   6px x51

     10px and 14px are among the most-used values in the product and were not
     in the scale at all, while 24px barely appears. Migrating the code to the
     old scale would have moved hundreds of measurements by 2px each to make a
     token file look neat — changing the product to fit the abstraction instead
     of the other way round.

     So the scale describes what is there. The step is 2px at the small end
     because that is how this UI is actually built; a designer may later decide
     to coarsen it, and that is a design decision with a mockup, not a
     refactor. */
  --sp-1:       2px;
  --sp-2:       4px;
  --sp-3:       6px;
  --sp-4:       8px;
  --sp-5:       10px;
  --sp-6:       12px;
  --sp-7:       14px;
  --sp-8:       16px;
  --sp-9:       20px;
  --sp-10:      24px;

  /* ── Elevation ─────────────────────────────────────────────────────────
     Both files carried a --shadow-sm within a hair of each other. */
  --shadow-sm:  0 1px 2px rgba(16,24,40,.05);
  --shadow:     0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:  0 24px 60px -12px rgba(16,24,40,.30);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --dur:        .15s;
  --dur-slow:   .3s;
}