/* =========================================================================
   wireon design system — tokens (v2 / functional disruption)
   Canonical source. Vendored verbatim into every wireon.ch app.
   Re-copy whenever the version comment below bumps.

   Version: wireon-design-system v2 — see VENDOR_VERSIONS

   v2 collapses what v1 ran in parallel:
     - one space scale (--s-N). The --sp-N aliases below exist only so
       legacy callers compile; new code uses --s-N.
     - one grey scale (--grey-80/60/30/10). The --ink-NN aliases below
       exist only for legacy callers; new code uses --grey-NN.
     - no body-class scoping. Tokens live on :root, full stop.

   See DESIGN_SYSTEM.md (in this repo) for the rules of use and
   components.css for base component styles built on these tokens.
   ========================================================================= */

:root {
  /* --- ink & paper ----------------------------------------------------- */
  --ink:    #000000;
  --paper:  #ffffff;

  /* --- four greys. type and rules only. never as a fill. -------------- */
  --grey-80: #1b1b1b;   /* hard rules, near-ink type            */
  --grey-60: #727272;   /* secondary type, captions             */
  --grey-30: #afafaf;   /* tertiary type, disabled labels       */
  --grey-10: #e4e4e4;   /* hairline soft dividers, table rows   */

  /* --- two semantic status colors. banners and field errors only. ---- */
  --success: #0a7a3b;
  --danger:  #c8102e;

  /* --- roles. always reference these, never the raw colors. ---------- */
  --fg:           var(--ink);
  --fg-muted:     var(--grey-60);
  --fg-meta:      var(--grey-30);
  --fg-inverse:   var(--paper);
  --bg:           var(--paper);
  --bg-inverse:   var(--ink);
  --rule:         var(--ink);          /* hairline border, 1px default     */
  --rule-strong:  var(--ink);          /* 2px section / panel-title rule   */
  --rule-soft:    var(--grey-10);      /* table-row dividers               */
  --rule-muted:   var(--grey-30);      /* faded edges, dashed empties      */

  /* --- type ------------------------------------------------------------ */
  --font-display: "Inter", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  --font-ui:      "Inter", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: 144px;
  --t-h1:      96px;
  --t-h2:      64px;
  --t-h3:      40px;
  --t-h4:      28px;
  --t-h5:      20px;
  --t-lead:    22px;
  --t-body:    15px;
  --t-small:   13px;
  --t-xs:      11px;       /* overlines, labels, badges */

  --lh-display: 0.88;
  --lh-h1:      0.92;
  --lh-h2:      0.96;
  --lh-h3:      1.04;
  --lh-h4:      1.15;
  --lh-body:    1.55;
  --lh-tight:   1.2;

  --tr-display: -0.045em;
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.14em;    /* overline / button / label */

  /* --- spacing. one scale. 9 steps. ----------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* --- lines ---------------------------------------------------------- */
  --bw-hair:  1px;   /* default border                                  */
  --bw-rule:  2px;   /* section rule, panel title, focus ring           */
  --bw-bar:   4px;   /* page-header top edge                            */
  --bw-block: 8px;   /* graphic punctuation, never functional           */

  --radius: 0;       /* there is no other value.                        */

  /* --- motion --------------------------------------------------------- */
  --ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   100ms;
  --dur:        180ms;
  --dur-slow:   400ms;
  --dur-cinematic: 800ms;
  /* Back-compat alias for apps that adopted hub's naming. */
  --ease-editorial: var(--ease);

  /* --- layout --------------------------------------------------------- */
  --maxw:   1440px;
  --gutter: 64px;

  /* --- pattern tunables. patterns inherit currentColor (the ink),
         so they flip with hover-invert for free.                       */
  --dot-size:    1px;
  --dot-step:   14px;
  --stripe-w:    8px;
  --stripe-gap: 12px;
}

/* -------------------------------------------------------------------------
   legacy aliases — DO NOT use in new code. exist so apps mid-rotation
   still compile against the canonical. removed in v3.
   ------------------------------------------------------------------------- */
:root {
  /* v1 grey ramp → v2 four-grey scale. */
  --ink-90: var(--grey-80);
  --ink-60: var(--grey-60);
  --ink-30: var(--grey-30);
  --ink-15: var(--grey-30);
  --ink-08: var(--grey-10);
  --ink-04: var(--grey-10);
  --ink-02: var(--grey-10);

  /* v1 role names. */
  --fg-1: var(--fg);
  --fg-2: var(--fg-muted);
  --fg-3: var(--fg-meta);
  --bg-1: var(--bg);
  --bg-2: var(--grey-10);

  /* v1 status names. */
  --ok:    var(--success);
  --ok-bg: var(--paper);     /* v2 doesn't tint backgrounds — use border */
  --err:    var(--danger);
  --err-bg: var(--paper);

  /* `--sp-N` was wireon-json-editor's drift. canonical is `--s-N`. */
  --sp-1: var(--s-1);
  --sp-2: var(--s-2);
  --sp-3: var(--s-3);
  --sp-4: var(--s-4);
  --sp-5: var(--s-5);
  --sp-6: var(--s-6);
  --sp-7: var(--s-7);
  --sp-8: var(--s-8);
  --sp-9: var(--s-9);
}

/* Always light. The wireon system renders the same regardless of OS
   colour scheme; opting into dark would invert the meaning of every
   :hover (since hover-invert is the system's signature interaction). */
:root { color-scheme: light; }

::selection { background: var(--ink); color: var(--paper); }

/* Respect reduced-motion. Animations collapse to a near-zero duration;
   transitions stay long enough that focus/state changes are perceptible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}