/* ========================================================================= FILENAME: kyp-palette.css ROLE: Colour and typography tokens for KnowYourProspect. Supports light/dark mode via prefers-color-scheme, with a manual override applied through a data-theme attribute on . No layout, spacing, or structural rules belong in this file — see kyp.css for that. SCALE TOKENS: the --kyp-plum-* and --kyp-gold-* tokens below are the full brand scale (50–900) from the proposed palette. They are additive — nothing existing has been rewired to use them yet, so this change is safe against every current use of --kyp-color-*. --kyp-color-accent and --kyp-color-stage-current already equal --kyp-plum-800 exactly; wiring that up is a separate, deliberate edit, not done here. ========================================================================= */ /* ------------------------------------------------------------------------- LIGHT MODE (default) ------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* Brand scale — plum */ --kyp-plum-50: #F5EFF3; --kyp-plum-75: #EBDFE8; --kyp-plum-100: #E2CFDC; --kyp-plum-200: #C19DB6; --kyp-plum-400: #8A6080; --kyp-plum-600: #5C3A54; --kyp-plum-800: #3E2236; --kyp-plum-900: #261020; /* Brand scale — gold */ --kyp-gold-50: #F8F2EC; --kyp-gold-100: #ECD9C4; --kyp-gold-200: #D4B898; --kyp-gold-400: #B08968; --kyp-gold-600: #8A6544; --kyp-gold-800: #63452A; --kyp-gold-900: #3D2810; /* Neutrals — plum-tinted, not pure grey */ --kyp-neutral-surface-light: #FAF8F9; --kyp-neutral-border-light: #F0EBEE; --kyp-neutral-text-muted: #9E8E98; --kyp-neutral-text-body: #4A3A45; --kyp-neutral-text-heading: #2C1E28; --kyp-neutral-surface-dark: #1A0E16; --kyp-color-bg: #FDFBFA; --kyp-color-surface: #ffffff; --kyp-color-surface-muted: #F3EBEA; --kyp-color-border: #E4D8D6; --kyp-color-text: #3A3436; --kyp-color-text-muted: #6B5D62; --kyp-color-text-faint: #9C8A90; --kyp-color-accent: var(--kyp-plum-800); --kyp-color-accent-hover: #2A1725; --kyp-color-accent-text: #ffffff; --kyp-color-stage-complete: #8A6D4E; --kyp-color-stage-complete-bg: #F3EBEA; --kyp-color-stage-current: var(--kyp-plum-800); --kyp-color-stage-current-bg: #F3EBEA; --kyp-color-stage-locked: #A99195; --kyp-color-stage-locked-bg: #F6F1F0; --kyp-logo-primary: #3E2236; --kyp-logo-accent: #B08968; /* Semantic — deliberately independent of the brand palette so they read as universally understood status signals, not brand accents. */ --kyp-color-success: #4C7A5E; --kyp-color-success-tint: #E9F3F1; --kyp-color-warning: #B0793C; --kyp-color-warning-tint: #FEF5EB; --kyp-color-error: #B0453F; --kyp-color-error-tint: #F9EDEC; --kyp-color-info: #1A6B9A; --kyp-color-info-tint: #E6F2FA; --kyp-font-family: 'Roboto', sans-serif; --kyp-font-size-base: 1rem; --kyp-font-size-sm: 0.875rem; --kyp-font-size-lg: 1.25rem; --kyp-font-weight-normal: 400; --kyp-font-weight-bold: 700; } /* ------------------------------------------------------------------------- DARK MODE — follows system preference automatically ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --kyp-color-bg: #211219; --kyp-color-surface: #2E1B26; --kyp-color-surface-muted: #38222E; --kyp-color-border: #4A3540; --kyp-color-text: #EDE6E3; --kyp-color-text-muted: #C3B3B8; --kyp-color-text-faint: #8A7A82; --kyp-color-accent: #D8B8C6; --kyp-color-accent-hover: #C9A277; --kyp-color-accent-text: #211219; --kyp-color-stage-complete: #C9A277; --kyp-color-stage-complete-bg: #38222E; --kyp-color-stage-current: #D8B8C6; --kyp-color-stage-current-bg: #38222E; --kyp-color-stage-locked: #8A7A82; --kyp-color-stage-locked-bg: #2A1922; --kyp-logo-primary: #D8B8C6; --kyp-logo-accent: #C9A277; --kyp-color-success: #6FA383; --kyp-color-success-tint: #1F3830; --kyp-color-warning: #D9A25C; --kyp-color-warning-tint: #3F2F20; --kyp-color-error: #D9756E; --kyp-color-error-tint: #3F1E1E; --kyp-color-info: #5BA8D5; --kyp-color-info-tint: #1F3344; } } /* ------------------------------------------------------------------------- MANUAL OVERRIDE — set by the theme toggle via data-theme attribute These take priority over prefers-color-scheme when present. ------------------------------------------------------------------------- */ [data-theme="light"] { --kyp-color-bg: #FDFBFA; --kyp-color-surface: #ffffff; --kyp-color-surface-muted: #F3EBEA; --kyp-color-border: #E4D8D6; --kyp-color-text: #3A3436; --kyp-color-text-muted: #6B5D62; --kyp-color-text-faint: #9C8A90; --kyp-color-accent: var(--kyp-plum-800); --kyp-color-accent-hover: #2A1725; --kyp-color-accent-text: #ffffff; --kyp-color-stage-complete: #8A6D4E; --kyp-color-stage-complete-bg: #F3EBEA; --kyp-color-stage-current: var(--kyp-plum-800); --kyp-color-stage-current-bg: #F3EBEA; --kyp-color-stage-locked: #A99195; --kyp-color-stage-locked-bg: #F6F1F0; --kyp-logo-primary: #3E2236; --kyp-logo-accent: #B08968; --kyp-color-success: #4C7A5E; --kyp-color-success-tint: #E9F3F1; --kyp-color-warning: #B0793C; --kyp-color-warning-tint: #FEF5EB; --kyp-color-error: #B0453F; --kyp-color-error-tint: #F9EDEC; --kyp-color-info: #1A6B9A; --kyp-color-info-tint: #E6F2FA; --kyp-font-family: 'Roboto', sans-serif; --kyp-font-size-base: 1rem; --kyp-font-size-sm: 0.875rem; --kyp-font-size-lg: 1.25rem; --kyp-font-weight-normal: 400; --kyp-font-weight-bold: 700; } [data-theme="dark"] { --kyp-color-bg: #211219; --kyp-color-surface: #2E1B26; --kyp-color-surface-muted: #38222E; --kyp-color-border: #4A3540; --kyp-color-text: #EDE6E3; --kyp-color-text-muted: #C3B3B8; --kyp-color-text-faint: #8A7A82; --kyp-color-accent: #D8B8C6; --kyp-color-accent-hover: #C9A277; --kyp-color-accent-text: #211219; --kyp-color-stage-complete: #C9A277; --kyp-color-stage-complete-bg: #38222E; --kyp-color-stage-current: #D8B8C6; --kyp-color-stage-current-bg: #38222E; --kyp-color-stage-locked: #8A7A82; --kyp-color-stage-locked-bg: #2A1922; --kyp-logo-primary: #D8B8C6; --kyp-logo-accent: #C9A277; --kyp-color-success: #6FA383; --kyp-color-success-tint: #1F3830; --kyp-color-warning: #D9A25C; --kyp-color-warning-tint: #3F2F20; --kyp-color-error: #D9756E; --kyp-color-error-tint: #3F1E1E; --kyp-color-info: #5BA8D5; --kyp-color-info-tint: #1F3344; }