/* ================================================================ UPNGRFL Enterprise Design System — Unified Token File Version 3.0 — Volumes 1–3 Modernization Program Complete ================================================================ PURPOSE This file is the single source of truth for all design decisions. All visual primitives (colour, spacing, radius, shadow, motion, z-index, layout, typography) MUST be defined here and referenced via var(--token-name) in site.css and panel.css. LOADING ORDER (all pages) 1. fonts.css — @font-face declarations (Manrope, Archivo) 2. fontawesome/ — icon library 3. tokens.css — THIS FILE — design system primitives 4. site.css — public site component styles OR panel.css — admin/team portal component styles HOW TO EXTEND • To add a new colour: add a primitive in section 1, then a semantic token in section 2 that references the primitive. • To add a spacing value: add to section 4 (space-N). • To add a radius: add to section 5 and a component alias if it maps to a specific UI element. • Never hardcode a value that should be a token in site.css. If a value is used more than once, it belongs here. TOKEN NAMING CONVENTION --category-variant: value; Examples: --blue-500, --radius-card, --space-6, --duration-fast DO NOT MODIFY without updating the relevant component in site.css. ================================================================ ORGANISATION 1. Colour Primitives (brand scale, raw values) 2. Semantic Colour Tokens (purpose-mapped for public site) 3. Typography (families, scale, weights, leading) 4. Spacing (4px base unit scale) 5. Radius (component corner radius) 6. Elevation (shadow / depth scale) 7. Motion (duration & easing) 8. Z-Index (stacking hierarchy) 9. Layout (containers, breakpoint reference) 10. Component Tokens (derived, component-level) ================================================================ */ :root { /* ============================================================ 1. COLOUR PRIMITIVES Raw brand scale — consumed by semantic tokens below. Do not use primitives directly in components. ============================================================ */ /* Blue — primary brand family */ --blue-50: #eff8ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #7dd3fc; --blue-500: #38bdf8; --blue-600: #1d84c6; --blue-700: #1e5ccf; --blue-800: #164d8f; --blue-900: #0f2238; --blue-950: #071426; /* Neutral */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* Canvas (tinted background family) */ --canvas-50: #f8fbff; --canvas-100: #eef6ff; --canvas-200: #dbeafe; /* Semantic states — raw */ --green-100: #dcfce7; --green-500: #22c55e; --green-800: #166534; --red-100: #fee2e2; --red-500: #ef4444; --red-800: #991b1b; --amber-100: #fef3c7; --amber-500: #f59e0b; --amber-800: #92400e; /* ============================================================ 2. SEMANTIC COLOUR TOKENS — PUBLIC SITE Map purpose to primitive. All components reference these. ============================================================ */ /* Backgrounds & surfaces */ --canvas: var(--canvas-100); --canvas-strong: var(--canvas-200); --surface: rgba(255, 255, 255, 0.9); --surface-strong: #ffffff; --surface-dark: var(--blue-950); --surface-dark-soft: #0f2238; /* Text (ink) — WCAG-compliant */ --ink: #0b1c2f; --ink-strong: #08182a; --ink-soft: #47607b; --ink-faint: #5a7291; /* Raised from #6c839d — passes WCAG AA on white */ --ink-inverse: #f3f9ff; /* Brand accent */ --accent: var(--blue-400); /* #7dd3fc light highlight */ --accent-strong: var(--blue-600); /* #1d84c6 medium */ --accent-deep: var(--blue-800); /* #164d8f deep */ --accent-soft: rgba(125, 211, 252, 0.16); /* Compatibility aliases */ --forest: #0f4c81; --forest-soft: rgba(15, 76, 129, 0.1); --gold: #d7f1ff; /* Dividers */ --line: rgba(72, 98, 130, 0.14); --line-strong: rgba(49, 82, 120, 0.26); /* Semantic states */ --colour-success: var(--green-500); --colour-success-text: var(--green-800); --colour-success-surface: var(--green-100); --colour-danger: var(--red-500); --colour-danger-text: var(--red-800); --colour-danger-surface: var(--red-100); --colour-warning: var(--amber-500); --colour-warning-text: var(--amber-800); --colour-warning-surface: var(--amber-100); /* Interactive focus */ --colour-focus-ring: rgba(125, 211, 252, 0.36); --colour-focus-border: rgba(29, 132, 198, 0.5); /* ============================================================ 3. TYPOGRAPHY TOKENS ============================================================ */ /* Font families */ --font-body: "Archivo", "Arial Narrow", "Franklin Gothic Medium", "Segoe UI", Arial, sans-serif; --font-display: "Archivo", "Arial Narrow", "Franklin Gothic Medium", "Segoe UI", Arial, sans-serif; --font-mono: "Courier New", Courier, monospace; /* Type scale (rem @ 16px base) */ --text-2xs: 0.6875rem; /* 11px — minimum label size, avoid for body */ --text-xs: 0.75rem; /* 12px — metadata, micro labels */ --text-sm: 0.8125rem; /* 13px — secondary metadata */ --text-base: 1rem; /* 16px — body minimum */ --text-md: 1.0625rem; /* 17px — comfortable body */ --text-lg: 1.125rem; /* 18px — large body / small heading */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* Eyebrow / micro-label */ --text-eyebrow: 0.8125rem; /* 13px — raised from 0.74rem (11.8px) */ /* Fluid display scale — hero & section headings */ --text-hero: clamp(2.4rem, 9vw, 3.2rem); /* 38–51px: mobile-first hero title */ --text-h2: clamp(1.9rem, 4vw, 3rem); /* 30–48px: section headings */ --text-h2-sm: clamp(1.85rem, 8vw, 2.4rem); /* 30–38px: mobile section headings */ --text-subpage-hero: clamp(2.25rem, 11vw, 3rem); /* subpage page-hero h1 mobile */ /* Line heights */ --leading-flat: 0.96; --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Font weights */ --weight-regular: 500; --weight-medium: 600; --weight-bold: 700; --weight-black: 800; /* Letter spacing */ --tracking-tight: -0.045em; --tracking-snug: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-wider: 0.1em; --tracking-widest: 0.14em; /* ============================================================ 4. SPACING SCALE — 4px base unit ============================================================ */ --space-px: 1px; --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; /* ============================================================ 5. RADIUS SCALE ============================================================ */ --radius-none: 0px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* Component aliases */ --radius-card: var(--radius-xl); /* 24px — standard card */ --radius-card-sm: var(--radius-lg); /* 18px — compact card */ --radius-input: var(--radius-md); /* 12px — form inputs */ --radius-badge: var(--radius-full); /* pill badges */ --radius-header: var(--radius-full); /* header pill */ /* ============================================================ 6. ELEVATION — Shadow Scale (4 levels) ============================================================ */ --shadow-1: 0 1px 2px 0 rgba(8, 23, 44, 0.04); --shadow-2: 0 4px 6px -1px rgba(8, 23, 44, 0.06), 0 2px 4px -2px rgba(8, 23, 44, 0.03); --shadow-3: 0 10px 24px -4px rgba(8, 23, 44, 0.08), 0 4px 8px -4px rgba(8, 23, 44, 0.04); --shadow-4: 0 24px 48px -8px rgba(8, 23, 44, 0.12), 0 8px 16px -4px rgba(8, 23, 44, 0.05); /* Legacy aliases — backwards compat with existing site.css */ --shadow: var(--shadow-3); --shadow-soft: var(--shadow-2); /* Focus & glow */ --glow-accent: 0 0 0 4px var(--colour-focus-ring); --glow-header: 0 20px 46px rgba(6, 18, 34, 0.22); /* ============================================================ 7. MOTION TOKENS ============================================================ */ /* Durations */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 320ms; --duration-slower: 420ms; --duration-spring: 280ms; /* Easing */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Composite transition shorthands */ --transition-colour: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-card: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-reveal: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out); --transition-nav: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-normal) var(--ease-out); /* ============================================================ 8. Z-INDEX HIERARCHY ============================================================ */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 40; --z-overlay: 200; --z-nav: 300; --z-modal: 400; --z-toast: 500; /* ============================================================ 9. LAYOUT TOKENS ============================================================ */ /* Containers — 24px minimum side padding (was 16px — audit C-3 fix) */ --container: min(1280px, calc(100vw - 48px)); --container-wide: min(1480px, calc(100vw - 48px)); /* Scroll offset for sticky header */ --scroll-offset: 92px; /* ============================================================ 10. COMPONENT TOKENS ============================================================ */ /* Buttons */ --btn-height-sm: 40px; --btn-height-md: 52px; /* Standard — raised from 50px (audit H-4) */ --btn-height-hero: 58px; /* Hero CTAs */ /* Minimum touch target */ --touch-min: 44px; /* Cards */ --card-pad: var(--space-7); /* 28px */ --card-pad-sm: var(--space-5); /* 20px */ /* Form inputs */ --input-height: 48px; --input-pad-x: var(--space-4); /* 16px */ --input-pad-y: var(--space-3); /* 12px */ /* Section vertical rhythm */ --section-py: var(--space-20); /* 80px desktop */ --section-py-md: var(--space-14); /* 56px tablet */ --section-py-sm: var(--space-12); /* 48px mobile */ /* Header */ --header-height: 92px; }