/**
* Luminio — Web Colour Tokens
* CSS Custom Properties · Design System v1.0
* Generated: May 2026
*
* Usage:
* @import 'luminio-tokens.css';
* background: var(--color-brand-primary);
*
* Supports automatic dark mode via prefers-color-scheme.
* All WCAG AA compliant pairings noted in comments.
*/
/* ─────────────────────────────────────────────────────────
ROOT: Light mode (default)
───────────────────────────────────────────────────────── */
:root {
/* ── Brand colours ─────────────────────────────────── */
/* Forest Green — primary brand anchor */
--color-brand-primary: #1A4D3A; /* Logo, headings, key CTAs */
--color-brand-primary-hover: #153d2e; /* Hover state */
--color-brand-primary-active: #102e22; /* Active / pressed */
--color-brand-primary-subtle: #E8F0EC; /* Light tint — backgrounds, highlights */
--color-brand-primary-tint: #b8d8c8; /* Mid tint — borders, dividers */
--color-brand-on-primary: #ffffff; /* Text on forest green bg — AA ✓ */
/* Amber Gold — accent */
--color-brand-accent: #C47F2C; /* Highlights, data callouts, premium accent */
--color-brand-accent-hover: #a86924; /* Hover */
--color-brand-accent-subtle: #FAF0E2; /* Light tint */
--color-brand-accent-tint: #f0d0a0; /* Mid tint — borders */
--color-brand-on-accent: #411800; /* Text on amber bg — AA ✓ */
/* Deep Navy — secondary */
--color-brand-secondary: #1D3D6E; /* Technology, trust, secondary headings */
--color-brand-secondary-subtle: #E6ECF4; /* Light tint */
--color-brand-secondary-tint: #b0c8e8; /* Mid tint */
--color-brand-on-secondary: #ffffff; /* Text on navy bg — AA ✓ */
/* ── Neutral surfaces ──────────────────────────────── */
--color-surface-base: #F9F7F3; /* Page background — warm cream */
--color-surface-raised: #ffffff; /* Cards, panels, modals */
--color-surface-sunken: #F2EFE9; /* Inset areas, code blocks */
--color-surface-overlay: rgba(17, 18, 16, 0.48); /* Modal scrim */
/* ── Text ──────────────────────────────────────────── */
--color-text-primary: #111210; /* Main body copy — AA on cream ✓ */
--color-text-secondary: #3d3a35; /* Supporting text */
--color-text-muted: #8A867E; /* Captions, labels, placeholders */
--color-text-disabled: #bbb8b2; /* Disabled states */
--color-text-inverse: #ffffff; /* On dark backgrounds */
--color-text-brand: #1A4D3A; /* Brand-coloured text links */
--color-text-accent: #854F0B; /* Amber text — AA on cream ✓ */
/* ── Borders ───────────────────────────────────────── */
--color-border-subtle: #DDD9D0; /* Default dividers, card borders */
--color-border-default: #c5c0b8; /* Slightly stronger — inputs */
--color-border-strong: #8A867E; /* Emphasis borders */
--color-border-brand: #1A4D3A; /* Focus rings, active states */
--color-border-accent: #C47F2C; /* Accent borders */
/* ── Semantic ──────────────────────────────────────── */
/* Success */
--color-success-bg: #E8F0EC;
--color-success-border: #1A4D3A;
--color-success-text: #1A4D3A;
--color-success-icon: #1A4D3A;
/* Warning */
--color-warning-bg: #FAF0E2;
--color-warning-border: #C47F2C;
--color-warning-text: #854F0B;
--color-warning-icon: #C47F2C;
/* Info */
--color-info-bg: #E6ECF4;
--color-info-border: #1D3D6E;
--color-info-text: #1D3D6E;
--color-info-icon: #1D3D6E;
/* Danger */
--color-danger-bg: #FDF0F0;
--color-danger-border: #C0392B;
--color-danger-text: #7a1e16;
--color-danger-icon: #C0392B;
/* ── Typography ────────────────────────────────────── */
--font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
--font-body: 'Manrope', 'Arial', 'Helvetica Neue', sans-serif;
--font-mono: 'DM Mono', 'Courier New', 'Courier', monospace;
/* Type scale */
--text-display: clamp(3.5rem, 6vw, 5rem); /* 56–80px */
--text-h1: 3rem; /* 48px */
--text-h2: 2.25rem; /* 36px */
--text-h3: 1.5rem; /* 24px */
--text-h4: 1.125rem; /* 18px */
--text-body-lg: 1rem; /* 16px */
--text-body: 0.875rem; /* 14px */
--text-caption: 0.75rem; /* 12px */
--text-mono: 0.8125rem;/* 13px */
--text-eyebrow: 0.625rem; /* 10px */
/* Line heights */
--leading-display: 1.0;
--leading-heading: 1.1;
--leading-body: 1.65;
--leading-relaxed: 1.75;
--leading-mono: 1.6;
/* Letter spacing */
--tracking-tight: -0.04em; /* Display, H1 */
--tracking-normal: 0;
--tracking-wide: 0.05em; /* H4, labels */
--tracking-widest: 0.2em; /* Eyebrows, tags */
/* Font weights */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* ── Spacing ────────────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
/* ── Radii ──────────────────────────────────────────── */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius-pill: 999px;
/* ── Shadows ────────────────────────────────────────── */
--shadow-card: 0 1px 3px rgba(17,18,16,0.06), 0 1px 2px rgba(17,18,16,0.04);
--shadow-raised: 0 4px 12px rgba(17,18,16,0.08), 0 2px 4px rgba(17,18,16,0.04);
--shadow-modal: 0 16px 40px rgba(17,18,16,0.14), 0 4px 12px rgba(17,18,16,0.06);
/* ── Focus ──────────────────────────────────────────── */
--focus-ring: 0 0 0 3px rgba(26, 77, 58, 0.28); /* Forest green focus ring */
/* ── Transitions ────────────────────────────────────── */
--transition-fast: 80ms ease;
--transition-default: 160ms ease;
--transition-slow: 320ms ease;
/* ── Z-index ────────────────────────────────────────── */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;
/* ── Layout ─────────────────────────────────────────── */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1240px;
--container-2xl: 1440px;
}
/* ─────────────────────────────────────────────────────────
DARK MODE
Strategy: invert surfaces, lighten text,
shift brand to lighter tints for readability
───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
/* Brand — lighter on dark */
--color-brand-primary: #4d9e7a; /* Lighter green readable on dark */
--color-brand-primary-hover: #5fb88e;
--color-brand-primary-active: #73d0a4;
--color-brand-primary-subtle: #0d2219; /* Dark tint */
--color-brand-primary-tint: #1a4d3a;
--color-brand-on-primary: #0d2219; /* Dark text on light green */
--color-brand-accent: #e8a84a;
--color-brand-accent-hover: #f0bc60;
--color-brand-accent-subtle: #281400;
--color-brand-accent-tint: #5a3200;
--color-brand-on-accent: #1a0900;
--color-brand-secondary: #6a9fd8;
--color-brand-secondary-subtle: #0d1e36;
--color-brand-secondary-tint: #1d3d6e;
--color-brand-on-secondary: #0d1e36;
/* Surfaces — dark */
--color-surface-base: #141410;
--color-surface-raised: #1e1d18;
--color-surface-sunken: #0f0e0b;
--color-surface-overlay: rgba(0, 0, 0, 0.64);
/* Text — light */
--color-text-primary: #f0ede6;
--color-text-secondary: #c4bfb5;
--color-text-muted: #7a766e;
--color-text-disabled: #4a4842;
--color-text-inverse: #111210;
--color-text-brand: #4d9e7a;
--color-text-accent: #e8a84a;
/* Borders */
--color-border-subtle: #2c2a24;
--color-border-default: #3d3a32;
--color-border-strong: #5a5850;
--color-border-brand: #4d9e7a;
--color-border-accent: #e8a84a;
/* Semantic */
--color-success-bg: #0d2219;
--color-success-border: #4d9e7a;
--color-success-text: #4d9e7a;
--color-success-icon: #4d9e7a;
--color-warning-bg: #281400;
--color-warning-border: #e8a84a;
--color-warning-text: #e8a84a;
--color-warning-icon: #e8a84a;
--color-info-bg: #0d1e36;
--color-info-border: #6a9fd8;
--color-info-text: #6a9fd8;
--color-info-icon: #6a9fd8;
--color-danger-bg: #2a0e0c;
--color-danger-border: #e05c53;
--color-danger-text: #e05c53;
--color-danger-icon: #e05c53;
/* Shadows — stronger on dark */
--shadow-card: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16);
--shadow-raised: 0 4px 12px rgba(0,0,0,0.32), 0 2px 4px rgba(0,0,0,0.16);
--shadow-modal: 0 16px 40px rgba(0,0,0,0.48), 0 4px 12px rgba(0,0,0,0.24);
--focus-ring: 0 0 0 3px rgba(77, 158, 122, 0.36);
}
}
/* ─────────────────────────────────────────────────────────
.luminio-dark — manual dark mode override class
Add to or any container to force dark mode
regardless of system preference
───────────────────────────────────────────────────────── */
.luminio-dark {
--color-brand-primary: #4d9e7a;
--color-brand-primary-hover: #5fb88e;
--color-brand-primary-active: #73d0a4;
--color-brand-primary-subtle: #0d2219;
--color-brand-primary-tint: #1a4d3a;
--color-brand-on-primary: #0d2219;
--color-brand-accent: #e8a84a;
--color-brand-accent-subtle: #281400;
--color-brand-on-accent: #1a0900;
--color-brand-secondary: #6a9fd8;
--color-brand-secondary-subtle: #0d1e36;
--color-surface-base: #141410;
--color-surface-raised: #1e1d18;
--color-surface-sunken: #0f0e0b;
--color-text-primary: #f0ede6;
--color-text-secondary: #c4bfb5;
--color-text-muted: #7a766e;
--color-text-brand: #4d9e7a;
--color-text-accent: #e8a84a;
--color-border-subtle: #2c2a24;
--color-border-default: #3d3a32;
--color-border-brand: #4d9e7a;
}
/* ─────────────────────────────────────────────────────────
UTILITY: HTML implementation reference
───────────────────────────────────────────────────────── */
/*
Usage examples:
background: var(--color-surface-raised);
color: var(--color-text-primary);
border: 0.5px solid var(--color-border-subtle);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-body);
transition: background var(--transition-default);
*/