/* GoCoreTalent brand tokens (R-P03). Every colour used anywhere in the app must resolve through one of these custom properties — no hard-coded hex values outside this file. Palette: deep sapphire blue + muted gold accent (D-067, "luxurious" reskin); see the .gct-dark-theme block below for the full dark-theme override (D-070). The static wwwroot/img/logo.svg / logo-light.svg assets are not tokenized (they're fixed images) — replaceable independently via the R-A63 logo upload. */ :root { /* Brand core */ --gct-color-primary: #0E2A5E; /* deep sapphire blue */ --gct-color-primary-dark: #081C40; /* hovers on primary, dark gradient end */ --gct-color-primary-light: #3E5FA0; /* tints on navy surfaces, secondary headings on dark */ --gct-color-accent: #B8933F; /* muted gold — the "luxurious" contrast note */ --gct-color-accent-dark: #96762F; /* accent hover/active */ --gct-color-accent-light: #F8EFDC; /* accent tint backgrounds (badges, icon chips) */ /* Neutrals */ --gct-color-bg: #FFFFFF; --gct-color-bg-muted: #F4F6FA; --gct-color-surface: #FFFFFF; --gct-color-border: #E1E5EE; --gct-color-text: #1A1D29; --gct-color-text-muted: #5B6270; --gct-color-text-on-primary: #FFFFFF; --gct-color-text-on-primary-muted: #B9C4DE; --gct-color-text-on-accent: #241C08; /* Feedback — independent of the brand accent (D-067), not tied to gold */ --gct-color-success: #2E9E6B; --gct-color-danger: #C0392B; --gct-color-danger-bg: #FBEAE8; --gct-color-warning: #B7791F; /* Gradients (hero/section backdrops — composed from brand core, not new hex) */ --gct-gradient-hero: radial-gradient(1200px 480px at 85% -10%, color-mix(in srgb, var(--gct-color-accent) 14%, transparent), transparent), linear-gradient(180deg, var(--gct-color-bg-muted) 0%, var(--gct-color-bg) 100%); --gct-gradient-dark: linear-gradient(160deg, var(--gct-color-primary) 0%, var(--gct-color-primary-dark) 100%); /* Typography */ --gct-font-family-base: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --gct-font-size-base: 1rem; /* Spacing scale */ --gct-space-1: 0.25rem; --gct-space-2: 0.5rem; --gct-space-3: 1rem; --gct-space-4: 1.5rem; --gct-space-5: 2.5rem; --gct-space-6: 4rem; --gct-space-7: 6rem; /* Shape */ --gct-radius-sm: 8px; --gct-radius-md: 12px; --gct-radius-lg: 18px; --gct-radius-pill: 999px; /* Elevation — tinted with the new primary-dark for a deeper, more premium feel */ --gct-shadow-sm: 0 1px 3px rgba(8, 28, 64, 0.10); --gct-shadow-md: 0 10px 28px rgba(8, 28, 64, 0.14); --gct-shadow-lg: 0 28px 56px rgba(8, 28, 64, 0.20); --gct-shadow-accent: 0 10px 24px rgba(184, 147, 63, 0.35); /* gold glow for accent CTAs */ --gct-shadow-glow: 0 8px 24px rgba(8, 28, 64, 0.18); /* light-theme fallback; dark theme below replaces with a blue glow */ /* Motion */ --gct-transition-fast: 150ms ease; --gct-transition-base: 220ms cubic-bezier(0.2, 0.7, 0.3, 1); /* Layout */ --gct-min-tap-target: 44px; } @media (prefers-reduced-motion: reduce) { :root { --gct-transition-fast: 0ms; --gct-transition-base: 0ms; } } /* "Luxurious" light icy-blue theme (D-072) — public site only. Scoped to a class added on in Views/Shared/_Layout.cshtml; the admin area's never gets this class, so /Admin/* keeps the light D-068 palette above completely unchanged (admin.css has no colours of its own — every admin rule already resolves through these same custom-property names). (The class is still named .gct-dark-theme for historical reasons — see D-072 in DECISIONS.md — it is no longer a dark theme; a rename is a nice- to-have, not yet done, to avoid touching every reference under time pressure while the palette itself was still being iterated on.) History: D-070 first tried a full DARK theme (near-black background), then D-071 lightened that dark background twice on direct colour feedback, capping it well short of the two requested colours (rgb(152, 192, 217) "steel", rgb(223, 251, 252) "ice") specifically to protect white-text contrast. Feedback after that was still "too dark, I don't see these colours dominant" — the real ask was for these two pale colours to BE the dominant background surfaces, not squeezed into text/border/glow roles on a dark backdrop. Pale colours are inherently low-contrast as TEXT (against light) and as SOLID FILL BEHIND WHITE TEXT (against dark) — the only role where they can be genuinely dominant AND legible is as the background itself, with dark text on top. Hence: full reversal to a light theme, primary/text roles now the deep sapphire from the original D-068 palette (proven safe on light backgrounds), and the two requested colours doing the visually dominant work — hero/section gradient sweep, muted-section wash, card borders, hover fills, shadows. */ .gct-dark-theme { --gct-color-primary: #0E2A5E; --gct-color-primary-dark: #081C40; --gct-color-primary-light: #98C0D9; --gct-color-accent: #FFC947; --gct-color-accent-dark: #E6AC2E; --gct-color-accent-light: rgba(255, 201, 71, 0.14); --gct-color-bg: #EFFAFC; --gct-color-bg-muted: #DFFBFC; --gct-color-surface: #FFFFFF; --gct-color-border: #98C0D9; --gct-color-text: #16324F; --gct-color-text-muted: #4C6B85; --gct-color-text-on-primary: #FFFFFF; --gct-color-text-on-primary-muted: #B9C4DE; --gct-color-text-on-accent: #241C08; --gct-color-success: #2E9E6B; --gct-color-danger: #C0392B; --gct-color-danger-bg: #FBEAE8; --gct-color-warning: #B7791F; --gct-gradient-hero: radial-gradient(1200px 480px at 85% -10%, color-mix(in srgb, var(--gct-color-accent) 12%, transparent), transparent), linear-gradient(160deg, #EFFAFC 0%, #DFFBFC 45%, #98C0D9 100%); --gct-gradient-dark: linear-gradient(160deg, #0E2A5E 0%, #081C40 100%); --gct-shadow-sm: 0 1px 3px rgba(14, 42, 94, 0.1); --gct-shadow-md: 0 10px 28px rgba(14, 42, 94, 0.14); --gct-shadow-lg: 0 24px 48px rgba(14, 42, 94, 0.2); --gct-shadow-accent: 0 10px 24px rgba(255, 201, 71, 0.35); --gct-shadow-glow: 0 8px 24px rgba(152, 192, 217, 0.45); }