/* ============================================================================
   LiveOS Design System — tokens.css
   V1.1 · 2026-08-20  (V1.1: critic-corrected — see VERSIONS.md)

   LiveOS is NOT a separate design system. It is Business OS Design System V6
   plus a LiveOS layer. The neutral family, typeface, radii, spacing scale and
   motion below are BOS V6 verbatim — identical hexes, identical values. Only
   the LAYER section is LiveOS-specific.

   Every value here was extracted from a shipped V19/V20 module, never invented.
   Where modules disagreed, the majority value won; the divergences are logged
   in "LiveOS Design Standard V1.md" §7.
   ========================================================================== */

:root {

  /* ══ INHERITED FROM BOS V6 — do not diverge ══════════════════════════════
     These are byte-identical to Operating System/Design/Business OS brandbook/
     tokens.css. If BOS V6 changes one of these, LiveOS follows. */

  /* neutral family — the whole identity */
  --white:     #FFFFFF;
  --grey-100:  #F4F3F1;   /* card surface */
  --grey-200:  #EAE8E3;   /* nested well, hover fill */
  --grey-300:  #E2E0DC;   /* divider hairline, inactive control fill */
  --grey-edge: #E5E3DE;   /* white-on-white hairline */
  --muted:     #8E8D89;   /* secondary text */
  --ink-900:   #1A1A19;   /* text, dark cards, dark sections */

  /* semantic color roles */
  --bg:      var(--white);
  --surface: var(--grey-100);
  --ink:     var(--ink-900);

  /* type */
  --font: 'Plus Jakarta Sans', sans-serif;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-pill: 450;
  /* 600 is the CEILING. Never 700. Emphasis beyond 600 = size, color, or ground. */

  /* radius */
  --r-lg:   30px;   /* hero / media */
  --r-md:   26px;   /* cards */
  --r-sm:   16px;   /* wells, card heads */
  --r-pill: 999px;

  /* spacing (4pt) */
  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px; --sp-10: 40px;

  /* motion */
  --dur-micro: 200ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* layout */
  --wrap-max: 1280px;
  --gutter: 40px;

  /* interactive control sizing — three tiers, nothing off-tier */
  --ctrl-sm: 16px;  --ctrl-sm-icon:  9px;   /* inline / dense, next to body text */
  --ctrl-md: 24px;  --ctrl-md-icon: 12px;   /* DEFAULT — toolbar, card, row actions */
  --ctrl-lg: 40px;  --ctrl-lg-icon: 18px;   /* hero tiles, primary actions */

  --divider: 1px solid var(--grey-300);


  /* ══ LIVEOS LAYER — genuinely LiveOS, not in BOS V6 ══════════════════════ */

  /* ── type: LiveOS runs a denser, four-step scale ──
     BOS V6's --b2 is 13px and it has no --b4. LiveOS pages are data-dense
     dashboards read at arm's length, so the body step is 13.5px and a fourth
     micro step exists for bar values and dates. This is the one deliberate
     type divergence from BOS V6. */
  --h1: 60px;                 /* hero display only */
  --b1: 14px;                 /* section lede — majority across 7 modules; the shell's 15px is the outlier */
  --b2: 13.5px;               /* item + card names */
  --b3: 11px;                 /* meta, labels, graph labels — the page default */
  --b4: 9px;                  /* micro: bar values, connector labels, dates */
  --body-lh: 1.55;
  --label-w: 600; --label-ls: .16em;   /* uppercase micro-labels */

  /* ── neutrals that diverge from BOS V6 ──
     LiveOS runs a warmer, lighter border grey than BOS V6's #CFCABD. 21/21
     modules agree on this value, so it is the LiveOS standard — but it is a
     real divergence, not an inheritance. Do not "correct" it toward BOS. */
  --grey-400: #D2CFC8;   /* dashed baselines, control borders */

  /* ── control sizing that BOS V6 does not define as a variable ──
     BOS carries status-circle as a tokens.json component entry and a literal
     26px in ui.css, never as a CSS custom property. LiveOS declares it. */
  --status-circle: 26px;

  /* ── the 7-step diverging rating scale ──
     LiveOS's signature. Red at -3, neutral grey at 0, green at +2, teal at +3
     so the top band reads as its own thing, not "more green". Shared verbatim
     by Life Areas, Human Needs, Inner States, Health & Fitness, Essence of Life.
     Never re-derive per module; never add an 8th step. */
  --rate-1: #CE3A2E;   /* -3 */
  --rate-2: #E2853C;   /* -2 */
  --rate-3: #F0C244;   /* -1 */
  --rate-4: #B8B3AA;   /*  0 — neutral, deliberately colorless */
  --rate-5: #8CC63F;   /* +1 */
  --rate-6: #33B28E;   /* +2 */
  --rate-7: #2E86D6;   /* +3 */

  /* ── functional state color — OVERRIDES BOS V6, does not extend it ──
     BOS V6 defines --func-success (#4EC79C) and --func-caution (#E8BE4D).
     LiveOS deliberately runs deeper, less candied hues. Because the names
     collide, a page must never load both stylesheets — load LiveOS tokens
     only. State only, never decoration; a glyph always accompanies the hue. */
  --func-success: #3FAE5C;
  --func-caution: #E29A3C;
  --func-danger:  #D5544B;
  --func-peak:    #56A9DB;

  /* ── data-viz sizing — NOT a control tier ──
     Bar tracks and scale dots are decorative marks, not interactive controls,
     so they are deliberately off the --ctrl-* scale. Do not swap them for
     control tokens to "clean up"; that would make dense charts unreadable. */
  --bar-track-w-sm:  7px;  --bar-track-h-sm: 34px;
  --bar-track-w-lg:  8px;  --bar-track-h-lg: 84px;
  --dot-scale:       6px;   /* scale dot on a graph track */
  --dot-score:      calc(var(--ctrl-sm-icon) * .8);  /* inline score dot in a pill */

  /* ── app-shell chrome ── */
  --sidebar-w: 250px;
  --topbar-h:   44px;   /* literal 44px in app-shell; named here, not in source */
  --head-h:     58px;   /* dark card head band */

  /* ── vision / mosaic layer (Life Areas) ── */
  --vision-thumb:  30px;
  --vision-frame-h: 210px;
  --mosaic-chip:   34px;
}

/* ── mobile ──────────────────────────────────────────────────────────────
   640px, matching every shipped module. The whole scale steps down — this is
   not a couple of overrides. A page that only shrinks the hero will not match
   the build. (app-shell alone uses 767px for its drawer breakpoint; that is a
   layout switch, not a scale change, and lives in ui.css.) */
@media (max-width: 640px) {
  :root {
    --gutter: 14px;

    --h1: 42px; --b2: 9.5px; --b3: 8px; --b4: 7px;

    --r-lg: 21px; --r-md: 18px; --r-sm: 11px;

    --sp-2: 6px; --sp-3: 8px; --sp-4: 11px; --sp-5: 14px; --sp-10: 28px;

    --ctrl-sm: 11px; --ctrl-sm-icon: 7px;
    --ctrl-md: 15px; --ctrl-md-icon: 8px;
    --status-circle: 18px;
    --head-h: 44px;

    --bar-track-w-lg: 6px; --bar-track-h-lg: 64px;

    --vision-thumb: 22px;
    --vision-frame-h: 150px;
    --mosaic-chip: 26px;
  }
}