/* ============================================================================= ProSuitability marketing — COLOUR tokens Source of truth: rwl_project/User Guides/web front end/ suitability-report-design-tokens.css Kept in static/ so the marketing pages can load it directly. Reference SEMANTIC + COMPONENT tokens (var(--color-*)) in markup, not the raw ramps. ============================================================================= */ :root { /* 1. PRIMITIVE RAMPS ------------------------------------------------------ */ --navy-50: #EEF3F8; --navy-100: #D5E1EE; --navy-200: #ABC2DA; --navy-300: #7E9DC1; --navy-400: #54789F; --navy-500: #36577C; --navy-600: #244468; --navy-700: #1B3A5C; --navy-800: #142C46; --navy-900: #0E1F32; --teal-50: #E7F6F3; --teal-100: #C2E9E2; --teal-200: #8FD6CA; --teal-300: #5BC2B1; --teal-400: #36AD9B; --teal-500: #2A9D8F; --teal-600: #1F8073; --teal-700: #1A6B61; --teal-800: #145249; --teal-900: #0D3A34; --slate-50: #F8FAFC; --slate-100: #F1F4F8; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #5A6B7B; --slate-700: #44546A; --slate-800: #2A3645; --slate-900: #1A2433; --green-50: #ECFDF3; --green-500: #16A34A; --green-700: #15803D; --amber-50: #FEF6E7; --amber-500: #D97706; --amber-700: #B45309; --red-50: #FEECEC; --red-500: #DC2626; --red-700: #B91C1C; --blue-50: #EAF1FB; --blue-500: #2563EB; --blue-700: #1D4ED8; --white: #FFFFFF; /* 2. SEMANTIC TOKENS — LIGHT --------------------------------------------- */ --color-bg-app: #F5F7FA; --color-surface: var(--white); --color-surface-raised: var(--white); --color-surface-sunken: #EEF2F6; --color-overlay: rgba(14, 31, 50, 0.45); --color-text-primary: var(--slate-900); --color-text-secondary: var(--slate-600); --color-text-tertiary: var(--slate-400); --color-text-on-brand: var(--white); --color-text-on-accent: var(--white); --color-border: var(--slate-200); --color-border-strong: var(--slate-300); --color-border-focus: var(--teal-500); --color-primary: var(--navy-700); --color-primary-hover: var(--navy-600); --color-primary-active: var(--navy-800); --color-accent: var(--teal-600); --color-accent-hover: var(--teal-700); --color-accent-active: var(--teal-800); --color-success-bg: var(--green-50); --color-success-text: var(--green-700); --color-success: var(--green-500); --color-warning-bg: var(--amber-50); --color-warning-text: var(--amber-700); --color-warning: var(--amber-500); --color-error-bg: var(--red-50); --color-error-text: var(--red-700); --color-error: var(--red-500); --color-info-bg: var(--blue-50); --color-info-text: var(--blue-700); --color-info: var(--blue-500); /* 3. COMPONENT / STATE TOKENS -------------------------------------------- */ --btn-ghost-bg-hover: var(--slate-100); --btn-ghost-bg-active: var(--slate-200); --btn-disabled-bg: var(--slate-200); --btn-disabled-text: var(--slate-400); --link-text: var(--teal-700); --link-text-hover: var(--teal-800); --focus-ring: 0 0 0 3px rgba(42, 157, 143, 0.40); --focus-ring-offset: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--teal-500); } /* 4. DARK MODE — toggle with ----------------------- */ [data-theme="dark"] { --color-bg-app: #0E1B2B; --color-surface: #15273B; --color-surface-raised: #1B3047; --color-surface-sunken: #0B1624; --color-overlay: rgba(0, 0, 0, 0.55); --color-text-primary: #E8EDF3; --color-text-secondary: #A3B2C2; --color-text-tertiary: #6B7C8E; --color-text-on-brand: var(--white); --color-text-on-accent: #07241F; --color-border: #283B52; --color-border-strong: #38506B; --color-border-focus: var(--teal-400); --color-primary: #2F6FB0; --color-primary-hover: #3D80C4; --color-primary-active: #275C92; --color-accent: var(--teal-500); --color-accent-hover: var(--teal-400); --color-accent-active: var(--teal-600); --btn-ghost-bg-hover: rgba(255, 255, 255, 0.06); --btn-ghost-bg-active: rgba(255, 255, 255, 0.10); --link-text: var(--teal-300); --link-text-hover: var(--teal-200); --focus-ring: 0 0 0 3px rgba(91, 194, 177, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-app: #0E1B2B; --color-surface: #15273B; --color-surface-raised: #1B3047; --color-surface-sunken: #0B1624; --color-text-primary: #E8EDF3; --color-text-secondary: #A3B2C2; --color-text-tertiary: #6B7C8E; --color-text-on-accent: #07241F; --color-border: #283B52; --color-border-strong: #38506B; --color-primary: #2F6FB0; --color-primary-hover: #3D80C4; --color-primary-active: #275C92; --color-accent: var(--teal-500); --color-accent-hover: var(--teal-400); --link-text: var(--teal-300); --link-text-hover: var(--teal-200); --focus-ring: 0 0 0 3px rgba(91, 194, 177, 0.45); } }