/* ============================================================
   Vext Labs brand tokens — Figma Brand Guidelines 2026-09-01
   fileKey oW3A8ELzrZVcbc7oG41rY8
   Single token file for vextlabs-site. Porcelain layout/spacing/motion
   stay in proposal-a.css and vext-2026.css; this file owns colour,
   type, and the lockup. Figma painted fills win leftover Katalyze labels.
   ============================================================ */

:root {
  /* HITL-3 (brief §6.6 / tokens.theme): light-only is the shipping decision.
     Forcing color-scheme here — not just declaring it — is what stops a
     dark-mode browser from auto-inverting form controls/scrollbars against
     tokens that were never designed to invert. See the dark-mode stub below
     this block for why the other two states of the pattern stay empty. */
  color-scheme: light;

  /* Painted fills — nodes 1:1644, 1:1676, 1:7430, 1:1220, 1:1305 */
  --vb-paper: #F3F3F4;          /* frame field, node 1:1676 / 1:1220 */
  --vb-white: #FFFFFF;          /* light paper, node 1:1644 */
  --vb-ink: #101010;            /* painted ink, node 1:1644 */
  --vb-ink-mark: #1A1A1A;       /* wordmark / X fill, node 1:1220 / 1:1337 */
  --vb-orange: #FF5D1B;         /* act / orange field, node 1:1644 / 1:7430 */
  --vb-magenta: #FF93FF;        /* Electric Pink, node 1:7430 (label matches fill) */

  /* Leftover Katalyze labels on the same frames — NOT used on the site.
     Recorded so the discrepancy stays visible. */
  --vb-label-paper-leftover: #F6F0E9;
  --vb-label-ink-leftover: #2B180A;
  --vb-label-lavender-leftover: #C8B8FF;
  --vb-label-taupe-leftover: #94877C;

  --vb-font-display-licensed: "Helvetica Now Display";
  --vb-font-body-licensed: "Helvetica Now Display";
  --vb-font-script-licensed: "Figma Hand";
  --vb-font-display: var(--vb-font-display-licensed), "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --vb-font-body: var(--vb-font-body-licensed), "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --vb-font-script: var(--vb-font-script-licensed), "Bradley Hand", "Segoe Script", cursive;
  --vb-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --vb-track-display: -0.03em;  /* node 1:1795 Display–H4 */
  --vb-track-body: -0.02em;     /* node 1:1795 body 24px */
  --vb-track-caption: 0;        /* node 1:1795 captions 20px */
  --vb-clear-edge: 28px;        /* node 1:1368 edge guides */
  --vb-clear-title: 16px;       /* node 1:1278 “16px to title card” */

  /* Proposal A aliases — porcelain components keep --pa-* names */
  --pa-grey: var(--vb-paper);
  --pa-black: var(--vb-ink);
  --pa-white: var(--vb-white);
  --pa-cream: var(--vb-paper);
  --pa-orange: var(--vb-orange);
  --pa-magenta: var(--vb-magenta);
  --pa-magenta-deck-label: #87C6E1; /* 2026-08-19 typo, retained as record */

  --pa-bg: var(--vb-paper);
  --pa-bg-inverse: var(--vb-ink);
  --pa-surface: var(--vb-white);
  --pa-text: var(--vb-ink);
  --pa-text-inverse: var(--vb-white);
  --pa-text-muted: color-mix(in srgb, var(--vb-ink) 62%, transparent);
  --pa-text-muted-inverse: color-mix(in srgb, var(--vb-white) 68%, transparent);
  --pa-action: var(--vb-orange);
  --pa-action-text: var(--vb-ink); /* ink on orange ≥4.5:1; white on orange fails body */
  --pa-accent: var(--vb-magenta);
  --pa-hair: color-mix(in srgb, var(--vb-ink) 12%, transparent);
  --pa-hair-inverse: color-mix(in srgb, var(--vb-white) 18%, transparent);

  --pa-font-display-licensed: var(--vb-font-display-licensed);
  --pa-font-body-licensed: var(--vb-font-body-licensed);
  --pa-font-script-licensed: var(--vb-font-script-licensed);
  --pa-font-display: var(--vb-font-display);
  --pa-font-body: var(--vb-font-body);
  --pa-font-script: var(--vb-font-script);
  --pa-font-mono: var(--vb-font-mono);

  /* vext-2026 aliases */
  --vl-grey: var(--vb-paper);
  --vl-ink: var(--vb-ink);
  --vl-paper: var(--vb-paper);
  --vl-cream: var(--vb-white);
  --vl-orange: var(--vb-orange);
  --vl-orange-ink: var(--vb-ink);
  --vl-magenta: var(--vb-magenta);
  --vl-muted: color-mix(in srgb, var(--vb-ink) 62%, transparent);
  --vl-line: color-mix(in srgb, var(--vb-ink) 16%, transparent);
  --vl-line-soft: color-mix(in srgb, var(--vb-ink) 9%, transparent);
  --vl-display: var(--vb-font-display);
  --vl-body: var(--vb-font-body);
  --vl-mono: var(--vb-font-mono);
}

/* ============================================================
   HITL-TYPE — licensed faces are not shipped (brief §1.3.4, §6.2;
   tokens.type.licensing). Helvetica Now Display and Figma Hand are
   unlicensed and no font file exists anywhere in this tree (checked
   vextlabs-site/assets, juwel-landing/assets, and the whole repo for
   *.woff, *.otf and *.ttf files matching either name — none found, 2026-09-03).

   --vb-font-display / --vb-font-body / --vb-font-script above already list
   the licensed family FIRST, so the moment a real @font-face activates that
   name, every component picks it up with zero markup changes — but until
   then the name never resolves and the browser falls through to the next
   stack entry, "Helvetica Neue", Helvetica, Arial. That fallback is chosen
   on purpose, not a placeholder: Helvetica Now Display is a redraw of the
   same super-family as Helvetica Neue (shared x-height proportions, close
   cap-height and average glyph width), so it is the metrically-closest face
   actually installed on mainstream OSes today. Landing on it first — before
   Arial, before ui-sans-serif — minimises the reflow (CLS) a visitor will
   see on the day a real @font-face is added. A Google-served lookalike
   (e.g. Archivo/Inter as a Helvetica-Now stand-in) was considered and
   rejected: the brief is explicit that swapping in a similar-looking Google
   font "is inventing a brand face," and a system fallback is honest about
   what it is where a lookalike would not be.

   The @font-face rules below are DELIBERATELY inert — every one is a
   comment, so nothing here fetches, declares, or claims a font file that
   does not exist. HITL-2 (commercial licence) is what turns a block live:
   drop the woff2 files at the paths named, uncomment the matching block,
   and the display/body/script stacks above resolve to it automatically. */

/*
@font-face {
  font-family: "Helvetica Now Display";
  src: url("/assets/fonts/HelveticaNowDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Display";
  src: url("/assets/fonts/HelveticaNowDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figma Hand";
  src: url("/assets/fonts/FigmaHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================================
   HITL-3 — dark mode is NOT authorized (brief §6.6; tokens.theme:
   "NOT in the measured Figma file... a new brand surface with no Figma
   source"). The shipping decision is tokens.theme.recommendation,
   "light-only, with color-scheme: light set explicitly" (done above).

   The three selector states below are the standing convention this repo
   uses for any themable token file — bare :root, a prefers-color-scheme
   media query guarded so an explicit light choice can still win, and a
   [data-theme="dark"] override for a manual toggle — kept here so the
   structure exists and a future, founder-approved dark palette is a
   values-only edit in this one place. Both blocks are left EMPTY on
   purpose: color-scheme:light above already stops the browser
   auto-inverting UI chrome, and writing mirrored values here would claim a
   derived dark theme was reviewed and shipped when it was not. Do not fill
   these in without HITL-3 sign-off. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* intentionally empty — see HITL-3 note above */
  }
}
:root[data-theme="dark"] {
  /* intentionally empty — see HITL-3 note above */
}

/* Lockup: X (Figma 1:1337) + Helvetica Now “Vext Labs” (1:1220). Company mark only. */
.vl-lockup,
a.pa-wordmark.vl-lockup,
p.pa-wordmark.vl-lockup,
a.vl-brand.vl-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--vb-ink-mark);
  text-decoration: none;
  font-family: var(--vb-font-display);
  font-weight: 700;
  letter-spacing: var(--vb-track-display);
}

.vl-lockup__mark,
.pa-mark {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: inherit;
}

.vl-lockup__word {
  font-size: var(--pa-step-1, 1.25rem);
  line-height: 1;
  white-space: nowrap;
}

.pa-inverse .vl-lockup,
.pa-inverse .pa-wordmark,
.vl-brand-stage .vl-lockup {
  color: var(--vb-white);
}

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