/* ============================================================================ Design Tokens , SinoMandarin Institute Nigeria Source of truth: UI/UX Design Specification §2–§4. Values are fixed, not suggestions (Build Prompt Ground Rule #6). ============================================================================ */ :root { /* Brand primary */ --color-primary-crimson: #8B0E12; --color-primary-crimson-dark: #6E0B0E; --color-primary-crimson-light: #B33338; --color-navy: #011F39; --color-navy-light: #0E3A5C; --color-gold: #957F67; --color-gold-light: #C6B29A; /* Neutrals */ --color-white: #FFFFFF; --color-off-white: #FAF9F7; --color-gray-100: #F2F1EF; --color-gray-300: #D8D5D0; --color-gray-500: #8A8781; --color-gray-700: #4A4844; --color-gray-900: #1E1D1B; /* Semantic */ --color-success: #2E7D4F; --color-warning: #B8860B; --color-error: #C0392B; --color-info: #2C5C8A; /* Typography */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-cjk: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; /* Type scale (desktop) */ --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-tiny: 12px; /* Spacing (8px base grid) */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; --container-max: 1280px; --radius-sm: 6px; --radius-md: 8px; --shadow-card: 0 2px 8px rgba(30, 29, 27, 0.06), 0 1px 2px rgba(30, 29, 27, 0.08); --shadow-card-hover: 0 8px 24px rgba(30, 29, 27, 0.10), 0 2px 6px rgba(30, 29, 27, 0.08); --transition-fast: 180ms ease; /* ========================================================================== Semantic surface/text tokens , the indirection layer that makes dark mode (UI/UX ask #5/#6) a theme swap rather than a rewrite. Raw brand colors above (crimson/navy/gold) are intentionally NEVER redefined per-theme , a button stays crimson-on-white-text in both modes. Only "what surface/text role is this pixel playing" flips. ========================================================================== */ --surface-page: var(--color-white); --surface-alt: var(--color-off-white); --surface-card: var(--color-white); --surface-header: var(--color-white); --surface-input: var(--color-white); --surface-overlay: rgba(30, 29, 27, 0.55); --text-heading: var(--color-gray-900); --text-body: var(--color-gray-700); --text-muted: var(--color-gray-500); --border-color: var(--color-gray-300); --border-soft: var(--color-gray-100); --skeleton-a: var(--color-gray-100); --skeleton-b: var(--color-gray-300); color-scheme: light; } @media (max-width: 599px) { :root { --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 22px; } } /* ============================================================================ Dark theme , activated by [data-theme="dark"] on (set by the inline no-flash bootstrap script + assets/js/main.js theme toggle). Brand accents (crimson/gold) stay identical; only surfaces/text/borders shift so every page keeps full WCAG-AA-appropriate contrast in dark mode (UI/UX ask #6 , "properly setup... looks and feels polished"). ============================================================================ */ html[data-theme="dark"] { color-scheme: dark; --surface-page: #0D1520; --surface-alt: #111A25; --surface-card: #16212D; --surface-header: #101923; --surface-input: #1B2733; --surface-overlay: rgba(3, 7, 12, 0.72); --text-heading: #F5F3EE; --text-body: #D6D2CB; --text-muted: #97A0AA; --border-color: #2B3746; --border-soft: #202B38; --skeleton-a: #1B2733; --skeleton-b: #29394A; /* Slightly brighter than the light-mode value so hairline borders and card separation stay visible against near-black surfaces. */ --color-gray-100: #202B38; --color-gray-300: #2B3746; /* Gold reads a touch darker on white than on near-black , lighten it a hair in dark mode so certificate/accent borders keep the same perceived weight (UI/UX §2.4 accessibility intent preserved). */ --color-gold: #B29B80; /* Semantic status colors (success/warning/error/info) are used both as small-text-on-tinted-background (badges) and as plain body text (alerts, form errors). Their light-mode values were tuned for white backgrounds and fall below AA contrast on near-black dark-mode surfaces, so they're brightened here , the brand accents above (crimson/gold/navy) intentionally stay fixed per UI/UX §2, but these are functional/semantic colors, not brand identity (ask #4). */ --color-success: #4CAF77; --color-warning: #D9A441; --color-error: #E0655A; --color-info: #6AA6DE; --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); }