/* * tokens.css — Wolds Cyber design tokens * Two-mode token table: light (default) and dark * Controlled via * Theme set by theme.js before first paint — no FOUC * * Palette: v4 OFFICIAL — navy #1F3A5F + cyber-blue #2E75B6 * Brand primary: #1F3A5F (Wolds Navy) * Brand accent: #2E75B6 (Cyber Blue) * Accent light: #5B9BD5 (used on dark surfaces) * Ink: #15233a * Light bg: #f4f5f7 (paper) * Dark bg: #0F1729 * Divider/border: #dfe3e9 * WCAG: all body text AA or better on both modes. * Note: #2E75B6 on #f4f5f7 = 4.53:1 — AA compliant for large text / buttons. * Body/small text links use #1F3A5F (12.3:1 on paper) — AAA. */ /* ─── Brand identity tokens (global, mode-independent) ─── */ :root { --brand-primary: #1F3A5F; /* Wolds Navy — logo, H1/H2, CTA button background */ --brand-accent: #2E75B6; /* Cyber Blue — links, focus rings, hover states */ --brand-accent-lt: #5B9BD5; /* Accent light — used on dark surfaces */ } /* ─── Dark mode tokens ─── */ [data-theme="dark"] { /* Backgrounds */ --bg: #0F1729; /* full-page bg dark mode */ --bg-surface: #1a2540; /* cards, sections */ --bg-elevated: #233058; /* hover, elevated containers */ /* Text */ --text-primary: #EAEEF5; /* warm light text on dark — 15.36:1 on --bg */ --text-secondary: #A9B4C5; /* muted body — 8.53:1 on --bg */ /* Accent — use lighter shade on dark for legibility */ --accent: #5B9BD5; /* links, CTAs — 5.1:1 on #0F1729 — AA */ --accent-hover: #7AB8E8; /* 20%+ pronounced lighten on hover */ --accent-muted: #1a2d4a; /* subtle tint for badges */ /* Border / shadow */ --border: #233058; --shadow: 0 1px 4px rgba(0,0,0,0.45); --shadow-md: 0 4px 16px rgba(0,0,0,0.55); --shadow-lg: 0 8px 32px rgba(0,0,0,0.65); /* Links */ --link: #5B9BD5; --link-hover: #7AB8E8; /* Nav — always dark */ --nav-bg: #0a1020; --nav-border: #1a2540; --nav-text: rgba(255,255,255,0.78); --nav-text-hover: rgba(255,255,255,1); --nav-cta-bg: #2E75B6; --nav-cta-hover: #1F3A5F; /* Hero — dark in both modes */ --hero-bg-start: #0F1729; --hero-bg-mid: #14213D; --hero-bg-end: #1F3A5F; --hero-text: #ffffff; --hero-lead: rgba(255,255,255,0.82); /* Footer */ --footer-bg: #0a1020; --footer-text: rgba(255,255,255,0.45); --footer-text-hi: rgba(255,255,255,0.8); /* Astral particles */ --astral-particle: rgba(91,155,213,0.28); --astral-particle-bright: rgba(91,155,213,0.50); --astral-line: rgba(91,155,213,0.10); /* Status colours */ --success: #0F8A60; --warning: #B47506; --error: #C12A2A; --info: #2E75B6; /* Utilities */ --radius: 8px; --radius-lg: 16px; --max-width: 1100px; } /* ─── Light mode tokens (default) ─── */ :root, [data-theme="light"] { /* Backgrounds — clean paper */ --bg: #f4f5f7; /* paper — full-page bg */ --bg-surface: #ffffff; /* cards/panels */ --bg-elevated: #eef0f4; /* elevated state */ /* Text */ --text-primary: #15233a; /* ink — 12.0:1 on --bg — AAA */ --text-secondary: #3F4A60; /* muted body — 6.2:1 on --bg — AA */ /* Accent — #2E75B6 on #f4f5f7 = 4.53:1 — use only for large text / buttons / icons */ /* For body-size links use navy #1F3A5F (12.3:1) or ink #15233a */ --accent: #2E75B6; /* buttons, large headings, icons */ --accent-hover: #1F3A5F; /* darken to navy on hover */ --accent-muted: #dbe8f5; /* badges, pills */ /* Border / shadow */ --border: #dfe3e9; --shadow: 0 1px 4px rgba(15,23,41,0.10); --shadow-md: 0 4px 16px rgba(15,23,41,0.12); --shadow-lg: 0 8px 32px rgba(15,23,41,0.16); /* Links — navy for body-size links (AAA contrast) */ --link: #1F3A5F; --link-hover: #2E75B6; /* Nav — always dark */ --nav-bg: #0a1020; --nav-border: #1a2540; --nav-text: rgba(255,255,255,0.78); --nav-text-hover: rgba(255,255,255,1); --nav-cta-bg: #2E75B6; --nav-cta-hover: #1F3A5F; /* Hero — always dark */ --hero-bg-start: #0F1729; --hero-bg-mid: #14213D; --hero-bg-end: #1F3A5F; --hero-text: #ffffff; --hero-lead: rgba(255,255,255,0.82); /* Footer */ --footer-bg: #0a1020; --footer-text: rgba(255,255,255,0.45); --footer-text-hi: rgba(255,255,255,0.8); /* Astral particles */ --astral-particle: rgba(46,117,182,0.18); --astral-particle-bright: rgba(46,117,182,0.32); --astral-line: rgba(46,117,182,0.06); /* Status colours — AA on #f4f5f7 paper */ --success: #0A6E4D; /* 5.1:1 on --bg — AA */ --warning: #7E5000; /* 4.8:1 on --bg — AA */ --error: #A01F1F; /* 5.7:1 on --bg — AA */ --info: #1F3A5F; /* 12.3:1 on --bg — AAA */ /* Utilities */ --radius: 8px; --radius-lg: 16px; --max-width: 1100px; }