/* ========================================================================= 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. ========================================================================= */ /* ------------------------------------------------------------------------- LIGHT MODE (default) ------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* Surface colours */ --kyp-color-bg: #f7f8fa; --kyp-color-surface: #ffffff; --kyp-color-surface-muted: #eef1f5; --kyp-color-border: #d5dbe3; /* Text colours */ --kyp-color-text: #1f2733; --kyp-color-text-muted: #5c6877; --kyp-color-text-faint: #9aa3af; /* Brand / accent — placeholder until logo and palette are finalised */ --kyp-color-accent: #2f6fed; --kyp-color-accent-hover: #1f56c4; --kyp-color-accent-text: #ffffff; /* Stage card states */ --kyp-color-stage-complete: #2f9e58; --kyp-color-stage-complete-bg: #e8f6ee; --kyp-color-stage-current: #2f6fed; --kyp-color-stage-current-bg: #eaf1fd; --kyp-color-stage-locked: #565f6d; --kyp-color-stage-locked-bg: #f1f2f4; /* Feedback colours */ --kyp-color-success: #2f9e58; --kyp-color-warning: #c97b1f; --kyp-color-error: #d1453d; /* Typography */ --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: #14181f; --kyp-color-surface: #1d232c; --kyp-color-surface-muted: #262d38; --kyp-color-border: #36404d; --kyp-color-text: #e8ebef; --kyp-color-text-muted: #aab3c0; --kyp-color-text-faint: #6b7484; --kyp-color-accent: #5b8df9; --kyp-color-accent-hover: #7ba2fb; --kyp-color-accent-text: #0e1116; --kyp-color-stage-complete: #4cc080; --kyp-color-stage-complete-bg: #16291f; --kyp-color-stage-current: #5b8df9; --kyp-color-stage-current-bg: #18233a; --kyp-color-stage-locked: #7d8999; --kyp-color-stage-locked-bg: #1c212a; --kyp-color-success: #4cc080; --kyp-color-warning: #e0a23f; --kyp-color-error: #e0685f; } } /* ------------------------------------------------------------------------- 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: #f7f8fa; --kyp-color-surface: #ffffff; --kyp-color-surface-muted: #eef1f5; --kyp-color-border: #d5dbe3; --kyp-color-text: #1f2733; --kyp-color-text-muted: #5c6877; --kyp-color-text-faint: #9aa3af; --kyp-color-accent: #2f6fed; --kyp-color-accent-hover: #1f56c4; --kyp-color-accent-text: #ffffff; --kyp-color-stage-complete: #2f9e58; --kyp-color-stage-complete-bg: #e8f6ee; --kyp-color-stage-current: #2f6fed; --kyp-color-stage-current-bg: #eaf1fd; --kyp-color-stage-locked: #565f6d; --kyp-color-stage-locked-bg: #f1f2f4; --kyp-color-success: #2f9e58; --kyp-color-warning: #c97b1f; --kyp-color-error: #d1453d; } [data-theme="dark"] { --kyp-color-bg: #14181f; --kyp-color-surface: #1d232c; --kyp-color-surface-muted: #262d38; --kyp-color-border: #36404d; --kyp-color-text: #e8ebef; --kyp-color-text-muted: #aab3c0; --kyp-color-text-faint: #6b7484; --kyp-color-accent: #5b8df9; --kyp-color-accent-hover: #7ba2fb; --kyp-color-accent-text: #0e1116; --kyp-color-stage-complete: #4cc080; --kyp-color-stage-complete-bg: #16291f; --kyp-color-stage-current: #5b8df9; --kyp-color-stage-current-bg: #18233a; --kyp-color-stage-locked: #6b7484; --kyp-color-stage-locked-bg: #1c212a; --kyp-color-success: #4cc080; --kyp-color-warning: #e0a23f; --kyp-color-error: #e0685f; }