/* ============================================================
   BookEngine design tokens — the single source of truth.

   Loaded before every other stylesheet. Nothing else should declare a
   brand colour, radius, shadow or easing: consume these instead, so a
   rebrand is one file rather than a hunt through eight.

   Values here are exactly what the page stylesheets already used, so
   adopting this file changes nothing visually. The SCALES near the
   bottom (spacing, elevation, type) are the standard for new work —
   existing pages are not retrofitted in one pass.
   ============================================================ */

:root {

  /* ---------- brand ---------- */

  --ink:        #0c2439;   /* body text, darkest surface */
  --navy:       #123a5c;   /* headings, top bar */
  --navy-2:     #0e2c46;   /* top bar gradient foot */
  --blue:       #2b74b0;   /* the accent — one accent, used sparingly */
  --blue-600:   #225d8f;   /* accent, pressed / hover */
  --blue-50:    #e7f0f8;   /* accent wash: active nav, selected row */

  /* ---------- neutrals ----------
     Biased toward the accent hue rather than pure grey, so they read as
     chosen rather than inherited. */

  --paper:      #ffffff;
  --slate-50:   #f4f7fa;   /* page ground, table head, card foot */
  --slate-100:  #eaf0f6;   /* hairlines inside a component */
  --slate-200:  #dbe4ec;   /* component borders */
  --slate-300:  #c2d0dd;   /* control borders */
  --slate-400:  #8296aa;   /* placeholder, disabled text */
  --slate-600:  #546b82;   /* secondary text */
  --muted:      #6b8098;   /* nav icon rest state */

  /* ---------- semantic ----------
     Deliberately not the accent. Blue means "brand", green/amber/red mean
     "state" — if they overlap, a user cannot tell branded from good.
     Never the only signal: pair with text or an icon. */

  --ok:         #2f8f5b;
  --ok-50:      #e4f3ea;
  --warn:       #b7791f;
  --warn-50:    #fdf3e3;
  --danger:     #c0392b;
  --danger-50:  #fdf0ee;

  /* ---------- shape ---------- */

  --r-sm:  5px;   /* chips, inline code, small controls */
  --r:     7px;   /* buttons, inputs, selects */
  --r-md:  9px;   /* nav items, list rows */
  --r-lg: 11px;   /* cards, panels, menus */
  --r-pill: 20px; /* status pills */

  /* ---------- layout ---------- */

  --bar-h:      62px;   /* sticky top bar; sticky children clear it */
  --nav-w:     256px;
  --nav-w-rail: 68px;   /* collapsed icon rail */

  /* ---------- motion ---------- */

  --ease:      cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  .14s;
  --dur:       .16s;
  --dur-slow:  .22s;

  /* Entrances decelerate: quick off the mark, soft landing. --ease is
     symmetrical and right for a state change between two known values
     (a colour, a width); it reads sluggish on something arriving from
     nowhere. Anything appearing on screen uses --ease-out. */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --dur-enter: .26s;

  /* One step of a staggered list. 12 rows land inside a quarter second;
     much slower and staff waiting on a table start to feel it. */
  --stagger:   22ms;

  /* ---------- type ---------- */

  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --sans:  "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  Menlo, Consolas, "Courier New", monospace;

  /* ---------- SCALES: use these for new work ----------
     The codebase currently carries 27 distinct padding/gap values
     (9, 11, 13, 15, 25, 26, 35 …). Ad-hoc spacing is the main reason an
     interface reads as assembled rather than designed. New work picks
     from this ladder; existing pages migrate as they are touched. */

  --sp-2:   2px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-56: 56px;

  /* Elevation, as a set rather than one-off shadows. Higher means closer
     to the user: 1 rests on the page, 4 floats above everything. */

  --e-1: 0 1px 2px rgba(12, 36, 57, .06);
  --e-2: 0 2px 8px rgba(12, 36, 57, .10);
  --e-3: 0 12px 32px rgba(12, 36, 57, .16);
  --e-4: 0 18px 50px rgba(12, 36, 57, .22);

  /* Type ladder. Fewer steps than the codebase currently uses; pick the
     nearest rung rather than inventing a size. */

  --fs-11: 11px;   /* uppercase labels, table heads */
  --fs-12: 12px;   /* dense table body, meta */
  --fs-13: 13px;   /* secondary text, nav */
  --fs-14: 14px;   /* controls, body default in dense views */
  --fs-15: 15px;   /* card titles */
  --fs-17: 17px;   /* section headings */
  --fs-22: 22px;   /* page title */

  /* Focus. One ring everywhere, so keyboard users learn it once. */

  --focus-ring: 0 0 0 3px rgba(43, 116, 176, .16);

  /* ---------- legacy aliases ----------
     nav-newbng.css shipped with its own names. Kept pointing at the
     canonical tokens so that file keeps working unchanged; prefer the
     names above in new code. */

  --blue-soft: var(--blue-50);
  --line:      var(--slate-200);
  --paper-2:   var(--slate-50);
  --bar:       var(--bar-h);
  --nav:       var(--nav-w);
}