/* ============================================================
VANTEUM DESIGN SYSTEM — Colors & Type
Advisory for emerging tech, AI, Fintech & growth strategy.
Modern · edgy · contemporary.
------------------------------------------------------------
BRAND FONT (per brand guide) is GOTHAM — a commercial license.
Until Gotham files are supplied, the display face is substituted
with MONTSERRAT (the canonical free Gotham match). FLAGGED to user.
Load once per page:
============================================================ */
/* ------------------------------------------------------------
@font-face — Manrope (body) & JetBrains Mono (data)
Free families, self-referenced from the @fontsource CDN so the
tokens resolve to real files. Gotham is licensed and intentionally
has NO @font-face — it renders via its fallback stack until the
user uploads the brand files (sidebar banner prompts for it).
------------------------------------------------------------ */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/manrope/files/manrope-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/manrope/files/manrope-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/manrope/files/manrope-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/manrope/files/manrope-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/manrope/files/manrope-latin-800-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/files/jetbrains-mono-latin-600-normal.woff2") format("woff2");}
:root {
/* ---------- BRAND SPECTRUM (sampled from the logo mark) ---------- */
--v-blue: #256BFD; /* primary brand / action */
--v-blue-700: #1B4FC4; /* pressed / deep */
--v-sky: #20C7FA; /* cyan facet */
--v-emerald: #04D897; /* green facet / positive */
--v-mint: #64FECB; /* light green facet */
--v-solar: #FDDB00; /* yellow facet */
--v-amber: #F8A613; /* orange facet / warning */
/* ---------- INK / NEUTRAL RAMP (slate-tuned, cool) ----------
Brand guide names only TWO neutrals: WHITE #FFFFFF and the
official "black" #37434F (--ink-600). The darker/lighter steps
below are a system extension for UI contrast & elevation. */
--ink-900: #11161B; /* near-black, max contrast headlines */
--ink-800: #1B2229;
--ink-700: #2A333C;
--ink-600: #37434F; /* OFFICIAL brand black — primary text */
--ink-500: #55636F;
--ink-400: #7C8893; /* secondary text */
--ink-300: #A6AFB8; /* muted / placeholder */
--ink-200: #D3D8DD; /* borders, dividers */
--ink-150: #E4E8EB; /* subtle border */
--ink-100: #EFF2F4; /* hairline / track */
--ink-50: #F6F8F9; /* tinted surface */
--white: #FFFFFF;
/* ---------- SURFACES ---------- */
--bg: var(--white);
--bg-sunken: var(--ink-50);
--bg-ink: var(--ink-900); /* dark sections / inverse */
--surface: var(--white);
--surface-2: var(--ink-50);
/* ---------- FOREGROUND TOKENS ---------- */
--fg1: var(--ink-900); /* primary text */
--fg2: var(--ink-600); /* body text */
--fg3: var(--ink-400); /* secondary text */
--fg4: var(--ink-300); /* muted / hints */
--fg-on-dark: #EDF1F4;
--fg-on-dark-2: #9AA7B3;
/* ---------- BORDERS ---------- */
--border: var(--ink-200);
--border-subtle: var(--ink-150);
--border-strong: var(--ink-300);
--border-ink: rgba(255,255,255,0.12);
/* ---------- SEMANTIC ---------- */
--accent: var(--v-blue);
--accent-hover: #1F5DE0;
--accent-press: var(--v-blue-700);
--accent-soft: #E9F0FF; /* tinted blue surface */
--accent-ring: rgba(37,107,253,0.35);
--success: #06B97F; /* slightly darkened emerald */
--success-soft: #E1FBF1;
--warning: var(--v-amber);
--warning-soft: #FEF1D9;
--danger: #F0463C;
--danger-soft: #FDE7E5;
--info: var(--v-sky);
--info-soft: #E1F7FE;
/* ---------- BRAND GRADIENTS (use sparingly, edges/accents) ---------- */
--grad-spectrum: linear-gradient(115deg, var(--v-emerald) 0%, var(--v-sky) 38%, var(--v-blue) 70%, var(--v-blue-700) 100%);
--grad-mint-sky: linear-gradient(135deg, var(--v-mint) 0%, var(--v-sky) 100%);
--grad-solar: linear-gradient(135deg, var(--v-solar) 0%, var(--v-amber) 100%);
--grad-ink: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
/* ============================================================
TYPE SYSTEM
Display : Gotham (brand) → Montserrat substitute — geometric,
American-gothic caps; echoes the VANTEUM wordmark
Body : "Paragraph Font" (brand, Light/Medium) → Manrope —
clean, neutral; use weights 300 (Light) & 500 (Medium)
Mono : JetBrains Mono — figures/data only (system addition)
============================================================ */
--font-display: "Gotham", "Montserrat", system-ui, sans-serif;
--font-body: "Manrope", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
/* type scale (1.250 major-third-ish, tightened at top) */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-5xl: 64px;
--text-6xl: 84px;
--leading-tight: 1.05;
--leading-snug: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.14em; /* the wordmark / eyebrow spacing */
/* ---------- RADII ---------- */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-2xl: 28px;
--r-pill: 999px;
/* ---------- SPACING (4px base) ---------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
/* ---------- ELEVATION (cool slate shadows, low-spread) ---------- */
--shadow-xs: 0 1px 2px rgba(17,22,27,0.06);
--shadow-sm: 0 1px 3px rgba(17,22,27,0.08), 0 1px 2px rgba(17,22,27,0.04);
--shadow-md: 0 4px 12px rgba(17,22,27,0.08), 0 2px 4px rgba(17,22,27,0.04);
--shadow-lg: 0 12px 32px rgba(17,22,27,0.10), 0 4px 8px rgba(17,22,27,0.05);
--shadow-xl: 0 24px 60px rgba(17,22,27,0.14);
--shadow-accent: 0 8px 24px rgba(37,107,253,0.28);
--focus-ring: 0 0 0 3px var(--accent-ring);
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Apply with utility classes or @extend-style references.
============================================================ */
.v-display,
.h0 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-6xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg1);
}
.h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg1);
}
.h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-3xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--fg1);
}
.h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-2xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--fg1);
}
.h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--fg1);
}
/* Eyebrows / kickers echo the Gotham wordmark: display caps, wide tracking */
.eyebrow {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-xs);
line-height: 1;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--accent);
}
.lead {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
color: var(--fg2);
}
.p, body {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--fg2);
}
.small {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--fg3);
}
.label {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-sm);
letter-spacing: 0.01em;
color: var(--fg1);
}
.mono,
.data {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: -0.01em;
color: var(--fg1);
font-feature-settings: "tnum" 1;
}
.code {
font-family: var(--font-mono);
font-size: var(--text-sm);
background: var(--ink-50);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
padding: 2px 6px;
color: var(--ink-700);
}