/* ============================================================ DV8 Sovereign Series — Canonical Design Tokens (ALIGNED v1.1) SINGLE SOURCE OF TRUTH for the whole estate. Import; never hand-edit. Light is the default theme. Switch themes with . Drop-in replacement for, and byte-identical across: • DV8-QUANTUM-SHIELD src/QuantumShield.Web/wwwroot/branding/tokens.css • DV8-QUANTUM-SECINTEL src/QuantumShieldInt.Web/wwwroot/branding/tokens.css • DV8-SS-KEYGEN src/Dv8.SS.KeyGen.Api/wwwroot/branding/tokens.css • DV8-SS-EDMS-SDIP apps/sdip-portal/src/styles/tokens.css (via @import) Reconciles the three drifted copies: - Neutral ramp unified to the full Tailwind "slate" scale (--neutral-200:#e2e8f0, --neutral-950:#020617). SecIntel's #e5e7eb / #111827 and KeyGen's partial ramp were the drift. - SANDF flag palette (--sa-flag-* / --sandf-*) promoted to tokens (previously only in KeyGen). - One rich [data-theme="sandf"] semantic block (from KeyGen), replacing SecIntel's 7-var stub and Shield's missing block. ============================================================ */ :root { /* Brand core */ --dv8-red: #C92736; /* primary action */ --dv8-red-hover: #A31E2B; --dv8-red-light: #E84A59; --dv8-orange: #F04C23; --dv8-black: #0B0503; --dv8-white: #F1F1F1; --dv8-grey: #F2F2F2; --dv8-beige: #E9E6E1; /* Quantum chrome (operator / dark surface) */ --quantum-cyan: #36D0FF; /* system / tech accent */ --quantum-cyan-hover: #1BA8D4; --quantum-navy-950: #0B1220; --quantum-navy-900: #0F1724; --quantum-navy-800: #152033; --quantum-slate: #9FB0C8; /* Status (semantic) */ --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #0891B2; /* Neutral scale — canonical cool-neutral ramp (Tailwind "slate"). Component styles must reference these vars, never the raw hex. --neutral-ink is a legacy alias kept for KeyGen compatibility. */ --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; --neutral-950: #020617; --neutral-ink: #111827; /* legacy alias (KeyGen) — gray-900 */ /* SANDF flag palette + defence brand constants (named tokens — consumed by css/sandf-theme.css and the sandf theme block) */ --sa-flag-green: #007A4D; --sa-flag-red: #DE3831; --sa-flag-blue: #002395; --sa-flag-gold: #FFB612; --sa-flag-black: #000000; --sa-flag-white: #FFFFFF; --sandf-green: #006536; --sandf-green-deep: #004225; --sandf-green-soft: #E7F2EC; --sandf-gold: #FFCA05; --sandf-gold-deep: #C89400; --sandf-sky-blue: #489DD1; --sandf-navy: #003974; --sandf-crimson: #D71635; --sandf-maroon: #9D032A; /* Surfaces & text (LIGHT — default) */ --page-bg: #FFFFFF; --surface-bg: #F9FAFB; --surface-elevated: #FFFFFF; --text: var(--dv8-black); --text-secondary: #4B5563; --text-tertiary: #6B7280; --text-inverse: #FFFFFF; --border: #E5E7EB; --border-strong: #D1D5DB; --focus-ring: rgba(54,208,255,0.45); /* Typography */ --font-display: "Saira", system-ui, sans-serif; /* brand & headings */ --font-body: "Inter", system-ui, sans-serif; /* all UI & body */ --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* ids, ports, tokens */ --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Elevation */ --shadow-card: 0 1px 3px rgba(11,5,3,.08), 0 1px 2px rgba(11,5,3,.05); --shadow-elevated: 0 4px 12px rgba(11,5,3,.10); --shadow-xl: 0 20px 25px -5px rgba(11,5,3,.12); /* Motion (collapses under prefers-reduced-motion) */ --transition-fast: 120ms cubic-bezier(.4,0,.2,1); --transition-base: 240ms cubic-bezier(.4,0,.2,1); /* Accessibility */ --touch-min: 44px; --touch-comfortable: 48px; } /* Quantum dark — operator theme for security & trust ops */ [data-theme="dark"] { --page-bg: var(--quantum-navy-950); --surface-bg: var(--quantum-navy-900); --surface-elevated: #18233A; --text: #E8EEF8; --text-secondary: #A6B6CE; --text-tertiary: #6E7E96; --text-inverse: #06283A; --border: rgba(159,176,200,.18); --border-strong: rgba(159,176,200,.28); --focus-ring: rgba(54,208,255,.40); --shadow-card: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20); --shadow-elevated: 0 4px 12px rgba(0,0,0,.45); } /* SANDF — brand-locked tenant theme (defence green). Semantic re-points live here; css/sandf-theme.css carries component rules only and is loaded LAST so its html[data-theme="sandf"] component rules win. */ [data-theme="sandf"] { color-scheme: light; --dv8-red: var(--sandf-green); /* primary re-points to defence green */ --dv8-red-hover: var(--sandf-green-deep); --dv8-red-light: var(--sa-flag-green); --page-bg: #F7F9F6; --surface-bg: #FFFFFF; --surface-elevated: #EAF3EE; --surface-overlay: rgba(255, 255, 255, 0.96); --text: #102017; --text-secondary: #56645C; --text-tertiary: #6F7C73; --text-disabled: #93A19A; --text-inverse: #FFFFFF; --border: #C8D8CE; --border-strong: #A9BEB0; --border-subtle: #EDF4EF; --brand-600: var(--sandf-green); --brand-700: var(--sandf-green-deep); --brand-500: var(--sa-flag-green); --accent-500: var(--sandf-gold); --accent-600: var(--sandf-gold-deep); --success: var(--sa-flag-green); --success-light: #0DA86D; --success-dark: #005D3C; --success-400: #20B87B; --success-500: var(--sa-flag-green); --success-600: #005D3C; --info: var(--sa-flag-blue); --info-light: #2747B5; --info-dark: #00185F; --info-500: var(--sa-flag-blue); --warning: var(--sa-flag-gold); --warning-light: #FFD15C; --warning-dark: #8A6500; --warning-500: var(--sa-flag-gold); --danger: var(--sa-flag-red); --danger-light: #EF6A63; --danger-dark: #A71F1A; --danger-500: var(--sa-flag-red); --status-bg-success: rgba(0, 122, 77, 0.12); --status-bg-warning: rgba(255, 182, 18, 0.18); --status-bg-danger: rgba(222, 56, 49, 0.14); --status-bg-info: rgba(0, 35, 149, 0.12); --focus-ring: rgba(255, 202, 5, 0.55); --focus-ring-offset: #F7F9F6; --shadow-card: 0 14px 34px rgba(0, 42, 22, 0.1); --shadow-elevated: 0 18px 44px rgba(0, 42, 22, 0.14); --shadow-focus: 0 0 0 3px rgba(255, 202, 5, 0.35); } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; } }