/* ============================================================
VM6 NETWORKS — DESIGN TOKENS
------------------------------------------------------------
Single source of truth for colour, type, spacing and radius.
Shared by: vm6.co.uk, WordPress theme, WHMCS theme.
USAGE
-----
1. Load this file FIRST, before any other stylesheet.
2. Theme is switched by an attribute on :
|
3. Set it before first paint to avoid a flash:
4. In WordPress: enqueue before the theme stylesheet.
In WHMCS: include in templates//includes/head.tpl.
5. Never hardcode a hex value in a component. If a colour is
missing here, add a token rather than a one-off.
SVG TOKENS
----------
The --svg-* group themes the inline illustrations. Legacy hexes
map as follows:
#0f172a #111827 #0a1120 -> --svg-bg
#1e293b #223047 #253358 -> --svg-panel
#334155 -> --svg-line
#6366f1 #8b5cf6 #7c3aed -> --svg-accent
#a5b4fc -> --svg-accent-2
#10b981 #34d399 -> --svg-signal
#94a3b8 #64748b #525866 -> --svg-muted
#f8fafc #f1f5f9 #dbeafe -> --svg-bright
#f59e0b #fbbf24 -> --svg-warn
#ef4444 #f87171 -> --svg-danger
============================================================ */
:root{
/* --- type --- */
--font-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* --- brand constants (identical in both themes) --- */
--brand:#5B6CFF;
--brand-600:#4a5aeb;
--brand-300:#a5b4fc;
--signal:#2FE08A;
--warn:#F5A524;
--danger:#F05252;
/* --- geometry --- */
--r-sm:7px; --r:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
--maxw:1200px;
--gap:20px;
--section-y:78px;
--header-h:66px;
--topbar-h:38px;
/* --- motion --- */
--ease:cubic-bezier(.4,0,.2,1);
--t-fast:.16s; --t:.22s;
}
/* ---------------- DARK (default) ---------------- */
[data-theme="dark"]{
--bg:#0A0E17;
--bg-2:#0D1220;
--bg-3:#10162A;
--surface:#121826;
--surface-2:#171F31;
--surface-3:#1D2740;
--line:#222C42;
--line-soft:#1A2233;
--text:#E8ECF6;
--text-strong:#FFFFFF;
--muted:#8B97AC;
--muted-2:#6C7A93;
--accent:var(--brand);
--accent-text:#A9B4FF;
--accent-soft:rgba(91,108,255,.14);
--accent-line:rgba(91,108,255,.34);
--signal-soft:rgba(47,224,138,.14);
--warn-soft:rgba(245,165,36,.14);
--danger-soft:rgba(240,82,82,.14);
--tint-rgb:255,255,255;
--tint-inv-rgb:0,0,0;
--brand-rgb:91,108,255;
--signal-rgb:47,224,138;
--shadow-sm:0 1px 0 rgba(255,255,255,.03);
--shadow:0 1px 0 rgba(255,255,255,.03),0 16px 40px -24px rgba(0,0,0,.9);
--shadow-lg:0 1px 0 rgba(255,255,255,.04),0 40px 80px -40px rgba(0,0,0,1);
--grid-line:rgba(255,255,255,.028);
--overlay:rgba(3,6,14,.66);
--on-accent:#FFFFFF;
--svg-bg:#0A0E17;
--svg-panel:#171F31;
--svg-line:#2A3651;
--svg-accent:#5B6CFF;
--svg-accent-2:#A9B4FF;
--svg-signal:#2FE08A;
--svg-muted:#8B97AC;
--svg-bright:#E8ECF6;
--svg-warn:#F5A524;
--svg-danger:#F05252;
color-scheme:dark;
}
/* ---------------- LIGHT ---------------- */
[data-theme="light"]{
--bg:#F4F6FB;
--bg-2:#EDF1F8;
--bg-3:#E6ECF7;
--surface:#FFFFFF;
--surface-2:#F7F9FD;
--surface-3:#EEF2FA;
--line:#DCE3F0;
--line-soft:#E8EDF6;
--text:#0E1526;
--text-strong:#05080F;
--muted:#586880;
--muted-2:#7A8698;
--accent:#4655E8;
--accent-text:#3A47C9;
--accent-soft:rgba(70,85,232,.09);
--accent-line:rgba(70,85,232,.28);
--signal:#0FA968;
--signal-soft:rgba(15,169,104,.11);
--warn:#B7791F;
--warn-soft:rgba(183,121,31,.12);
--danger:#D03535;
--danger-soft:rgba(208,53,53,.10);
--tint-rgb:14,21,38;
--tint-inv-rgb:255,255,255;
--brand-rgb:70,85,232;
--signal-rgb:15,169,104;
--shadow-sm:0 1px 2px rgba(16,24,40,.04);
--shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -18px rgba(16,24,40,.28);
--shadow-lg:0 2px 4px rgba(16,24,40,.05),0 32px 64px -34px rgba(16,24,40,.4);
--grid-line:rgba(14,21,38,.035);
--overlay:rgba(14,21,38,.42);
--on-accent:#FFFFFF;
--svg-bg:#FFFFFF;
--svg-panel:#EEF2FA;
--svg-line:#D3DBEA;
--svg-accent:#4655E8;
--svg-accent-2:#6674F0;
--svg-signal:#0FA968;
--svg-muted:#5E6B82;
--svg-bright:#0E1526;
--svg-warn:#B7791F;
--svg-danger:#D03535;
color-scheme:light;
}
/* ------------------------------------------------------------
LEGACY ALIASES
The existing page-level CSS was written against the old
stylesheet's variable names. They are mapped here rather than
rewritten across 29 pages, so old rules resolve correctly in
both themes. Use the modern names in anything new.
------------------------------------------------------------ */
:root,[data-theme]{
--primary-dark:var(--bg);
--primary-color:var(--accent);
--primary-accent:var(--accent);
--secondary-color:var(--accent-text);
--text-light:var(--text);
--text-muted:var(--muted);
--card-bg:var(--surface);
--border-color:var(--line);
--student-pop:var(--warn);
--te:var(--text-strong);
}