/* ============================================================================ GVN · iV0 DESIGN TOKENS — premium generation (landing parity, issue #66) ---------------------------------------------------------------------------- SINGLE HOME. All 7 iV0 surfaces (login · token · cabinet · lookup · versions · admin · Swagger) import THIS file — one source of truth, no drift. Direction: ONE visual generation with the landing (`/`, demo/index.html) — deep-ink navy, indigo trust-accent, glass layers, semantic status colour. 🔴 --bg / --accent / --ok / --danger / --ink are STRING-IDENTICAL to the landing's :root (machine guard U5-G1, #66) — change them ONLY in lockstep. Doctrine kept from iV0: sharp geometry, hairline borders carry elevation, monospace for ALL machine data, one accent max, restrained motion. Owner: visual-design-gannon. Edit tokens HERE only. ============================================================================ */ /* Vendored Geist / Geist Mono (landing parity, #66 VD-2) — served at /demo/fonts, no runtime CDN. Same faces the landing declares; Inter/JetBrains stay as fallback. */ @font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; } @font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; } @font-face { font-family:"Geist Mono"; src:url("/demo/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Geist Mono"; src:url("/demo/fonts/GeistMono-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; } :root { /* ── COLOR · backgrounds (deep-ink navy, layered by elevation) ───────────── */ --bg: #0b0e14; /* page — landing parity */ --bg-subtle: #0e1320; /* elevated surface / card / table (landing --bg-2)*/ --bg-hover: #131a2b; /* row / control hover */ --bg-active: #182136; /* pressed / selected */ /* ── COLOR · foreground (text) ───────────────────────────────────────────── */ --ink: #eef1f7; /* landing alias — primary text */ --fg: #eef1f7; /* primary text (= --ink) */ --fg-muted: #9aa6b8; /* secondary text (landing --ink-soft) */ --fg-subtle: #5d6678; /* tertiary / placeholder (landing --ink-faint) */ /* ── COLOR · borders (HAIRLINE carries elevation) ────────────────────────── */ --border: rgba(255,255,255,.14); /* default 1px hairline */ --border-subtle: rgba(255,255,255,.08); /* row separators */ --border-strong: rgba(255,255,255,.22); /* hover / focus border */ --glass: rgba(255,255,255,.035);/* glass layer (landing parity) */ --glass-2: rgba(255,255,255,.055); /* ── COLOR · accent (single indigo trust-accent, landing parity) ─────────── */ --accent: #6d8bff; --accent-fg: #8aa2ff; /* bright hover (landing --accent-bright) */ --accent-deep: #4d6bef; /* gradient base (landing --accent-deep) */ --focus: rgba(109,139,255,.30); /* keyboard focus ring / accent glow */ --grid: rgba(255,255,255,.025); /* subtle technical backdrop grid */ /* ── COLOR · inverse (primary-on-light) ──────────────────────────────────── */ --inverse-bg: #ffffff; --inverse-fg: #0b0e14; --inverse-bg-hover: #e5e9f2; /* ── COLOR · semantic status (badge = dot + text + border; NEVER color-only) ─ #66 п.5: lifecycle statuses are semantically coloured (no more bare B&W): In review = amber, Submitted/Processing = calm replay-blue, Locked = muted. --ok / --danger are the landing's semantic pair (string-identical, U5-G1). 🔴 --pending/--verified/--rejected stay RESERVED for M3/M4 (review-gate / seal / badge = paid milestones) — never a "verified/approved" colour story before it is earned. Do not use them on an iV0 surface. */ --ok: #5ee0b0; /* success (landing parity) */ --danger: #ff7a85; /* error / destructive (landing parity) */ --replay: #79b8ff; /* calm neutral (landing parity) — Submitted/Processing */ --review: #f5a623; --review-border: rgba(245,166, 35,0.35); --locked: #eef1f7; --locked-bg: #182136; --locked-border: rgba(255,255,255,.14); --pending: #3291ff; --pending-bg: rgba( 50,145,255,0.10); --pending-border: rgba( 50,145,255,0.30); --verified: #3fb950; --verified-bg: rgba( 63,185, 80,0.10); --verified-border: rgba( 63,185, 80,0.30); --rejected: #f85149; --rejected-bg: rgba(248, 81, 73,0.10); --rejected-border: rgba(248, 81, 73,0.30); /* ── TYPOGRAPHY (Geist vendored — landing parity, #66 VD-2) ─────────────── */ --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Mono is MANDATORY for machine data: dates, region codes, periods, record ids, digital fingerprints, tokens, revision counters. Sans for prose/labels. */ /* Size scale (px / line): xs 12/16 · sm 13/18 · base 14/20 · md 16/24 · lg 18/26 · xl 20/28 · 2xl 24/32 · 3xl 30/36 — UI base = 14. */ /* Weights: 400 normal · 500 medium (UI default) · 600 semibold (headings). Avoid 700. Heading letter-spacing -0.02em; mono 0. */ /* ── SPACING (4px base scale) ────────────────────────────────────────────── */ /* 1=4 2=8 3=12 4=16 5=20 6=24 8=32 10=40 12=48 16=64 */ /* ── RADIUS (SHARP — Real PO directive "острые!"; console keeps sharp edges while the landing rounds — the shared DNA is palette, not radius) ─────── */ --radius: 2px; /* buttons · inputs · badges */ --radius-md: 3px; /* cards · panels */ --radius-none: 0; /* ── ELEVATION (minimal — hairline borders do the work) ──────────────────── */ --shadow-sm: 0 1px 2px rgba(4,6,10,0.45); --shadow-md: 0 4px 12px rgba(4,6,10,0.55); /* ── MOTION (restrained, premium) ────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur: 200ms; } /* ============================================================================ BASE LAYER — shared by ALL 7 surfaces. Each surface links THIS file; nothing below is redefined per-surface (machine-checkable consistency, zero drift). ============================================================================ */ html, body { background: var(--bg); color: var(--fg); font-feature-settings: "cv11","ss01"; } body { font-family: var(--font-sans); /* technical grid backdrop — structure reads as trust, restrained */ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; } /* PRIMARY CALL-TO-ACTION — the ONE main action per surface. Single indigo tone via the token house (NOT per-surface hex). 🔴 background is NOT transitioned: the colour must resolve from var(--accent) instantly (machine guard U5-G2 reads the computed colour synchronously after a token override). */ .btn-primary { background: var(--accent); color: var(--inverse-bg); border: 1px solid var(--accent); box-shadow: 0 4px 14px var(--focus); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); } /* hover feedback = brightness, NOT a colour swap — the computed background must keep resolving from var(--accent) in every state (U5-G2 reads it under a token override, and the pointer may legitimately rest on the control) */ .btn-primary:hover { filter: brightness(1.12); border-color: var(--accent-fg); } /* generation bridge — legacy raw-black utilities used by the iV0 mockups map onto the navy token family (the mockup markup is a pinned LANE-1 artefact; the palette shift happens HERE, in the one token home) */ .bg-black\/80 { background-color: rgba(11,14,20,.82) !important; } .divide-\[\#1a1a1d\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-subtle) !important; } /* brandmark chip (#66 VD-1) — the landing's indigo glow chip on the console "G" (the mockups ship it as a B&W hairline square; the utility combo below is the brandmark's unique signature across all 8 surfaces — serving-layer restyle, mockup markup untouched). Mirrors .brandmark .dot on the landing. */ .h-6.w-6.border.hairline.mono, .h-7.w-7.border.hairline.mono { border-color: transparent !important; border-radius: 8px; background: linear-gradient(140deg, var(--accent-fg), var(--accent-deep)); box-shadow: 0 0 18px var(--focus); color: #fff; } /* monospace for ALL machine data (dates · ids · hashes · tokens · counters) */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tracking-tightish { letter-spacing: -0.01em; } .hairline { border-color: var(--border); } table tbody tr:hover { background: var(--bg-hover); } /* keyboard focus = single accent ring (a11y; mouse pointer unaffected) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); } ::selection { background: var(--accent); color: var(--inverse-bg); }