/* ============================================================
VEX SportTech — FOUNDATION TOKENS (tokens.css)
------------------------------------------------------------
Single DS foundation file. EVERY surface links this FIRST,
before its own stylesheet:
(etc.)
Layout of this file (order matters):
1. @import — self-hosted webfonts (Tajawal / IBM Plex Sans
Arabic / IBM Plex Mono) from /assets/fonts/vex/.
2. NEW DS :root — colors + typography + spacing ported VERBATIM
from design_handoff_vex_sporttech/tokens/*. Default = DARK.
3. ALIAS BRIDGE :root — every OLD --vex-* / --surface-* / scale
token name still referenced by the four legacy stylesheets is
re-pointed to the NEW handoff value, so those files render the
new dark-green look with ZERO rule edits.
4. .vex-theme-light scope — reports / print only (NOT the app).
IMPORTANT for frontend-dept: each legacy stylesheet still carries a
duplicated `:root { ... }` token block that loads AFTER this file and
would REDEFINE / DEFEAT the bridge below. You MUST delete that
duplicated token block from each stylesheet so the bridge wins.
See .planning/DS-ADOPTION-SPEC.md §0.
Source of truth: design_handoff_vex_sporttech/tokens/{colors,
typography,spacing,fonts}.css + README.md. Do NOT hand-edit values
here to chase a screen — extend the system and document it.
============================================================ */
@import "/assets/fonts/vex/fonts-vex.css";
/* ============================================================
2. NEW DS TOKENS — default theme is DARK (broadcast surface)
Ported verbatim from tokens/colors.css + typography.css + spacing.css.
============================================================ */
:root {
color-scheme: dark;
/* ---- Brand greens (the VX mark green ramp) ---- */
--vex-neon: #8ee62e; /* primary accent — neon (the V-triangle green) */
--vex-green: #2ba913; /* signal green — core brand green */
--vex-green-bright: #4fcb3a; /* mid-bright */
--vex-green-deep: #1c7a0d; /* deep green — pressed / shadow */
--vex-green-olive: #4a8f2a; /* muted olive — quiet fills */
--vex-signal: #10ec00; /* electric signal — live counter, scan line, glow */
/* ---- Neutral / jet (brand black) ---- */
--vex-jet: #252524; /* jet black — official brand black */
--vex-graphite: #15160f; /* warm graphite band */
--vex-ink-deep: #050605; /* deepest — video shell */
/* ---- Dark surfaces ---- */
--vex-bg: #080908; /* page background — jet */
--vex-bg-strong: #050605; /* darker band */
--vex-surface-1: rgba(37, 38, 33, 0.62); /* glass panel over jet */
--vex-surface-2: #16170f; /* solid panel */
--vex-surface-raise: rgba(255, 255, 255, 0.045); /* raised fill on dark */
--vex-on-dark: #f2f5ec; /* text on dark */
--vex-on-dark-muted: #a7b0a0; /* muted text on dark */
--vex-line: rgba(142, 230, 46, 0.15); /* green-tinted hairline */
--vex-line-strong: rgba(142, 230, 46, 0.26);
/* ---- Light surfaces (studies, reports, print) ---- */
--vex-paper: #ffffff;
--vex-shell: #f4f6f0;
--vex-mist: #e9ece2;
--vex-ink: #16170f; /* near-jet text on light */
--vex-muted: #5c6356; /* muted text on light — NOTE: bridged below for dark app */
--vex-border: rgba(37, 37, 36, 0.10); /* NOTE: bridged below for dark app */
--vex-border-strong: rgba(37, 37, 36, 0.16);
/* ---- Semantic status ---- */
--vex-success: #2ba913;
--vex-warning: #c9a227; /* amber — pending / caution, used sparingly */
--vex-danger: #d4503f; /* the "leak / loss" red for risk framing */
--vex-info: #2ba913;
/* ---- Data palette — green ramp + neutral steel (NO violet) ---- */
--vex-data-1: #2ba913; /* signal green — hero series */
--vex-data-2: #8ee62e; /* neon */
--vex-data-3: #1c7a0d; /* deep green */
--vex-data-4: #4fcb3a; /* bright green */
--vex-data-5: #7e8b79; /* steel-olive — neutral 2nd series (replaces old violet) */
--vex-data-6: #c9a227; /* amber — single highlight series */
/* ---- Gradients ---- */
--vex-gradient-accent: linear-gradient(135deg, var(--vex-green), var(--vex-neon));
--vex-gradient-signal: linear-gradient(90deg, var(--vex-green), var(--vex-neon));
--vex-gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
--vex-gradient-dark: linear-gradient(180deg, #16170f 0%, #080908 100%);
--vex-gradient-page: linear-gradient(180deg, #050605 0%, #080908 22%, #0c0d0a 100%);
/* ---- Glow / focus ---- */
--vex-glow: rgba(142, 230, 46, 0.22);
--vex-glow-ring: 0 0 0 4px rgba(16, 236, 0, 0.10);
--vex-focus-ring: 0 0 0 3px rgba(142, 230, 46, 0.32);
/* ---- Semantic aliases — default theme is DARK (broadcast surface) ---- */
--surface-page: var(--vex-bg);
--surface-card: var(--vex-surface-1);
--surface-solid: var(--vex-surface-2);
--surface-raise: var(--vex-surface-raise);
--surface-video: var(--vex-ink-deep);
--text-strong: var(--vex-on-dark);
--text-body: #dde4d4;
--text-muted: var(--vex-on-dark-muted);
--border: var(--vex-line);
--border-strong: var(--vex-line-strong);
--accent: var(--vex-neon);
--accent-strong: var(--vex-green);
--accent-ink: #06140a; /* text on a neon-green fill */
/* ---- Type: families ---- */
--font-ui: "IBM Plex Sans Arabic", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
--font-display: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* ---- Type: weights ---- */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
--weight-black: 900;
/* ---- Type scale (px) — UI / document ---- */
--text-1: 13px; /* caption / micro-label */
--text-2: 15px; /* secondary / table */
--text-3: 17px; /* body (Arabic reads a touch larger) */
--text-4: 21px; /* lead / card title */
--text-5: 29px; /* section sub-head */
--text-6: 38px; /* metric hero */
--text-7: 52px; /* display */
/* ---- Display scale (rem) — deck / cover headlines ---- */
--display-sm: clamp(2.1rem, 4vw, 3.4rem);
--display-md: clamp(2.6rem, 5.2vw, 4.8rem);
--display-lg: clamp(3.3rem, 6.4vw, 6.4rem);
--display-xl: clamp(4rem, 9vw, 9.5rem);
/* ---- Line heights (Arabic runs looser than Latin) ---- */
--leading-tight: 1.08;
--leading-snug: 1.28;
--leading-normal: 1.6;
--leading-relaxed: 1.9;
/* ---- Letter spacing ---- */
--tracking-display: -0.02em; /* Latin display lockups only */
--tracking-arabic: 0; /* Arabic headlines — never negative */
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-kicker: 0.18em; /* uppercase Latin eyebrows / HUD labels */
--tracking-wide: 0.08em;
/* ---- Numeric readouts (scoreboards / values) ---- */
--numeric: tabular-nums;
/* ---- Spacing scale (px) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
/* ---- Radii ---- */
--radius-control: 12px; /* buttons, inputs, pills-ish */
--radius-card: 18px; /* secondary cards */
--radius-panel: 22px; /* primary panels */
--radius-page: 24px; /* large containers */
--radius-lg: 30px; /* marketing frames */
--radius-sm: 10px; /* small fields */
--radius-pill: 999px;
/* ---- Shadows (dark-first; soft elevation) ---- */
--shadow-soft: 0 10px 28px rgba(16, 20, 14, 0.08);
--shadow-deep: 0 24px 60px rgba(14, 18, 13, 0.16);
--shadow-dark: 0 30px 90px rgba(0, 0, 0, 0.38);
--shadow-accent: 0 16px 40px rgba(16, 236, 0, 0.18);
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04);
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-standard: ease;
--dur-fast: 160ms;
--dur-base: 240ms;
--dur-slow: 520ms;
/* ---- Layout ---- */
--container: 1240px;
--rail-width: clamp(340px, 25vw, 360px);
--tap-min: 44px; /* minimum interactive target */
}
/* ============================================================
3. ALIAS BRIDGE — OLD token names → NEW DS values.
Keeps the four legacy stylesheets + inline styles working while
flipping every surface to the new DARK look in one pass.
(Takes full effect only once each stylesheet's own duplicated
:root token block is removed — see header note + DS-ADOPTION-SPEC.)
Rule: a line here maps an OLD name to the CLOSEST new handoff token.
Anchored on DS-ADOPTION-SPEC §2 INTENT, resolved to NEW values.
============================================================ */
:root {
/* ---- Brand greens (old ramp names → new ramp) ---- */
--vex-neon-green: var(--vex-neon);
--vex-green-violet: var(--vex-green-deep); /* "green violet" was always a green, never violet */
--vex-deep-green: var(--vex-green-bright);
--vex-olive-green: var(--vex-green-olive);
--vex-signal-green: var(--vex-signal);
--vex-signal-green-deep: var(--vex-green-deep);
/* ---- Neutral / ink ---- */
--vex-jet-black: var(--vex-jet);
--vex-graphite-deep: var(--vex-bg-strong);
/* --vex-graphite passes through unchanged (defined above) */
/* ---- Text: old semantic names → theme-aware DS text ---- */
--vex-ink-on-dark: var(--vex-on-dark);
--vex-muted-on-dark: var(--text-muted);
--vex-text: var(--text-strong); /* was var(--vex-ink) in old light scope */
--vex-surface: var(--surface-page); /* was var(--vex-shell) — now dark page */
/* --- OVERRIDES of two handoff LIGHT-palette names ---
The handoff uses --vex-muted / --vex-border for its LIGHT palette,
but the legacy stylesheets reference them as theme-aware muted-text
and hairline on the DARK app (20+ `color:`/`border:` rules). Re-point
them to the semantic tokens so those rules render correctly on dark.
Their LIGHT literals are preserved inside .vex-theme-light below
(as literals, to avoid a circular var() reference). */
--vex-muted: var(--text-muted);
--vex-border: var(--border);
/* ---- Borders / lines ---- */
--vex-line-dark: var(--border);
--vex-line-dark-strong: var(--border-strong);
/* ---- Glass panels (old dark-promoted names → DS dark surfaces) ---- */
--vex-panel-dark: var(--vex-surface-1);
--vex-panel-dark-strong: var(--vex-surface-2);
--vex-panel-dark-soft: var(--vex-surface-1);
/* ---- App surfaces: flip light glass → dark glass ---- */
--surface-1: var(--surface-card); /* was rgba(255,255,255,.84) */
--surface-2: var(--surface-solid); /* was rgba(255,255,255,.72) */
--surface-dark: var(--vex-gradient-dark);
--surface-dark-border: var(--border-strong); /* was rgba(255,255,255,.06) */
/* ---- Shadows ---- */
--vex-shadow-soft: var(--shadow-soft);
--vex-shadow-deep: var(--shadow-deep);
--vex-shadow-dark: var(--shadow-dark);
/* ---- Radii ---- */
--vex-radius-page: var(--radius-page);
--vex-radius-panel: var(--radius-panel);
--vex-radius-card: var(--radius-card);
--vex-radius-control: var(--radius-control);
/* ---- Glow / focus ---- */
/* --vex-glow / --vex-focus-ring pass through unchanged (defined above) */
--vex-focus: 2px solid var(--accent); /* composite outline; green now */
/* ---- Textures (no DS asset; keep neutral) ---- */
--vex-texture-url: none;
--vex-poster-url: none;
/* ---- Fonts: resolve old aliases → new families ---- */
--vex-font-ui: var(--font-ui);
--vex-font-display: var(--font-display);
/* --font-ui / --font-display / --font-mono already defined above */
/* ---- App-local layout token preserved (not a brand token) ---- */
--rail-resizer-width: 14px;
}
/* ============================================================
4. LIGHT THEME SCOPE — reports / print / light embeds ONLY.
The app (landing, gate, /app, /dashboard, track-editor) is
dark-first and must NOT add this class. Reports may opt in.
Ported from tokens/colors.css .vex-theme-light, with two
cycle-breaking literals (see note) + legacy re-points so old
names follow the light theme too.
============================================================ */
.vex-theme-light {
color-scheme: light;
--surface-page: var(--vex-shell);
--surface-card: var(--vex-paper);
--surface-solid: var(--vex-paper);
--surface-raise: rgba(255, 255, 255, 0.62);
--surface-video: var(--vex-ink-deep);
--text-strong: var(--vex-ink);
--text-body: #2a2d24;
/* Literal (not var(--vex-muted)): --vex-muted is bridged to var(--text-muted)
in :root, so referencing it here would create a circular var() reference. */
--text-muted: #5c6356;
/* Literal (not var(--vex-border)) for the same cycle-avoidance reason. */
--border: rgba(37, 37, 36, 0.10);
--border-strong: var(--vex-border-strong); /* --vex-border-strong is NOT bridged; safe */
--accent: var(--vex-green);
--accent-strong: var(--vex-green-deep);
--accent-ink: #06140a;
/* Legacy names follow the light theme (all resolve via the scoped tokens above) */
--surface-1: var(--surface-card);
--surface-2: var(--surface-solid);
--vex-muted: var(--text-muted);
--vex-text: var(--text-strong);
--vex-surface: var(--surface-page);
--vex-border: var(--border);
--vex-focus: 2px solid var(--accent);
}