/*
 * web/pwa/ob-mockup-tokens.css — the Wave-17 mockup's OWN design tokens, verbatim.
 *
 * WHY THIS FILE EXISTS. Every artboard in `.agent/wave17-wiring/mockup-source/*.dc.html` opens
 * with the same `:root{...}` block and every rule in the artboard's stylesheet is written against
 * those variable NAMES (`--fg-2`, `--bg-card`, `--border-soft`, `--r-lg`, `--t-base`, ...). The
 * app's own `ob-tokens.css` carries the same PALETTE under different names (`--ink`, `--ink-soft`,
 * `--border`) and with a light theme on top. Porting each artboard's CSS by hand-translating every
 * variable is exactly the step the first two wiring attempts got wrong page by page, so instead
 * this file republishes the mockup's names here, under an `--mk-` prefix.
 *
 * THE PREFIX IS LOAD-BEARING, not tidiness. 27 of these 58 names ALSO exist in ob-tokens.css with
 * a different meaning. `--ink` is the worst: here it is the artboards' darkest surface (#0B1620),
 * there it is the TEXT colour, which ob-tokens.css flips to near-white inside
 * `:root[data-theme="dark"]`. That selector outranks a bare `:root`, so an unprefixed
 * `--bg-dark: var(--ink)` resolved to #F4F8FB and painted a ported page white — observed, on the
 * first page ported. `--border` collided the same way but silently (#233140 against #26384A),
 * which is exactly the invisible drift this whole pass exists to remove.
 *
 * `.agent/mockup-parity/artboard.py` applies the same prefix to an artboard's CSS before diffing,
 * so a ported sheet stays byte-comparable against its source.
 *
 * DARK ONLY, by decision (research/57 §0). These are literal values, not theme-conditional — the
 * mockup has no light mode and light-theme fidelity was dropped as a goal.
 *
 * GENERATED from the union of every artboard's `:root` block. Do not hand-edit: regenerate.
 * Where two artboards disagreed on a value, the majority literal wins and the outlier keeps its
 * own local override inside that page's own stylesheet.
 */
/* The three families the mockup asks for, self-hosted (its own `@import` of fonts.googleapis.com
   is a third-party request the app's CSP refuses, and would leak a page view off-box anyway).
   Saira and IBM Plex Sans ship as VARIABLE fonts — one file each, covering the whole weight axis.
   That matters: the artboards use `font-weight: 500` 114 times, and the four static faces the app
   carried before this file had no 500 at all, so every one of those rules was being synthesised or
   snapped to 400/600. IBM Plex Mono has no variable cut; its three weights are separate files. */
@font-face { font-family:'Saira';        font-weight:100 900; font-style:normal; font-display:swap;
             src:url('/fonts/saira-var.woff2') format('woff2-variations'),
                 url('/fonts/saira-var.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:100 700; font-style:normal; font-display:swap;
             src:url('/fonts/ibm-plex-sans-var.woff2') format('woff2-variations'),
                 url('/fonts/ibm-plex-sans-var.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap;
             src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap;
             src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:600; font-style:normal; font-display:swap;
             src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root {
  /* steel / ink ramp */
  --mk-steel-50: #F2F6FA;
  --mk-steel-100: #E4ECF3;
  --mk-steel-200: #C7D4E0;
  --mk-steel-300: #94A8BC;
  --mk-steel-400: #6B8197;
  --mk-steel-500: #4A6076;
  --mk-steel-600: #344758;
  --mk-steel-700: #233140;
  --mk-steel-800: #15232F;
  --mk-steel-900: #0F1B26;
  --mk-ink: #0B1620;

  /* brand hues */
  --mk-blue-400: #4A9BE6;
  --mk-blue-500: #1B7AD6;
  --mk-blue-600: #0E5FB3;
  --mk-blue-700: #0B4A8F;
  --mk-cyan-300: #62E2EF;
  --mk-cyan-400: #2DD4E8;
  --mk-cyan-500: #00B8D4;
  --mk-cyan-600: #008FA5;
  --mk-red-500: #E1352B;
  --mk-yellow-500: #F2C300;
  --mk-green-500: #1F8E5B;
  --mk-red-400: #ffb3ac;

  /* surfaces */
  --mk-bg-dark: var(--mk-ink);
  --mk-bg-card: #15232F;
  --mk-bg-card-2: #233140;
  --mk-fg-1: #F4F8FB;
  --mk-fg-2: #B3C4D2;
  --mk-fg-3: #7B8E9F;
  --mk-border: #233140;
  --mk-border-soft: rgba(148,168,188,.14);
  --mk-brand: var(--mk-blue-600);
  --mk-accent: #00B8D4;
  --mk-fg-on-dark-1: #F4F8FB;
  --mk-fg-on-dark-3: #7B8E9F;

  /* type */
  --mk-font-display: 'Saira','Helvetica Neue',system-ui,sans-serif;
  --mk-font-sans: 'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mk-font-mono: 'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --mk-track-caps: 0.08em;
  --mk-track-tight: -0.02em;

  /* shape + motion */
  --mk-r-sm: 4px;
  --mk-r-md: 6px;
  --mk-r-lg: 10px;
  --mk-r-pill: 999px;
  --mk-ease: cubic-bezier(0.2,0,0,1);
  --mk-t-fast: 120ms;
  --mk-t-base: 160ms;

  /* knowledge-graph node types (KnowledgeGraph.dc.html) — `--t-` here is "type", not "timing" */
  --mk-t-person: #2F8FFF;
  --mk-t-skill: #17E68C;
  --mk-t-heuristic: #FFB300;
  --mk-t-decision: #FF3B5C;
  --mk-t-project: #00D8FF;
  --mk-t-artifact: #7C93FF;
  --mk-t-shipment: #FF8A1E;
  --mk-t-org: #A855F7;
  --mk-t-domain: #FF2E9A;

  /* misc */
  --mk-paper: #FFFFFF;
  --mk-apple-blue: #5AC8FA;
}