/* ============================================================ kc.art Benchmark — Color System Brand: Petrol #1699B4 · Steel #849AA5 Light + Dark mode via CSS custom properties. Usage: -> follows OS (prefers-color-scheme) -> force light -> force dark ============================================================ */ :root { /* -------- Brand scales (theme-independent reference) -------- */ --petrol-50: #e6f4f7; --petrol-100: #c6e8ee; --petrol-200: #9dd8e2; --petrol-300: #63c2d3; --petrol-400: #35b0c6; --petrol-500: #1699b4; /* brand petrol */ --petrol-600: #12869e; --petrol-700: #0f7387; --petrol-800: #0d5f6f; --petrol-900: #0e4a56; --petrol-950: #0c333c; --steel-50: #f4f6f7; --steel-100: #e6eaec; --steel-200: #ccd5d9; --steel-300: #b0bcc2; --steel-400: #9aa9b0; --steel-500: #849aa5; /* brand steel/grey */ --steel-600: #6c828d; --steel-700: #586b74; --steel-800: #3c4d54; --steel-900: #1b3e48; --steel-950: #14323b; /* petrol-navy ink */ /* -------- Status hues, harmonised to petrol's chroma -------- */ --success: #1ba87e; --warning: #d99a2b; --danger: #d65563; --info: #1699b4; /* -------- Data / chart series (benchmark ranking) -------- */ --chart-1: #1699b4; /* petrol */ --chart-2: #849aa5; /* steel */ --chart-3: #35b0c6; /* sky */ --chart-4: #0d5f6f; /* deep */ --chart-5: #57bf9a; /* teal */ --chart-6: #c6a15b; /* sand */ /* ============ LIGHT THEME (default) ============ */ --bg: #f7f9fa; --bg-elevated: #eef2f3; --surface: #ffffff; --surface-2: #f2f5f6; --surface-hover: #eaeff0; --border: #e2e7e9; --border-strong: #cdd5d9; --text: #14323b; --text-muted: #5c686e; --text-subtle: #8a949a; --text-inverse: #ffffff; --primary: #1699b4; --primary-hover: #12869e; --primary-active: #0f7387; --primary-subtle: #e6f4f7; /* tinted fill / badges */ --primary-border: #9dd8e2; --on-primary: #ffffff; --accent: #849aa5; --accent-subtle: #eef2f3; --focus-ring: rgba(22, 153, 180, 0.45); --shadow-sm: 0 1px 2px rgba(20, 49, 56, 0.06); --shadow-md: 0 1px 3px rgba(20, 49, 56, 0.06), 0 8px 28px rgba(20, 49, 56, 0.07); } /* ============ DARK THEME ============ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d2027; --bg-elevated: #102931; --surface: #14323b; --surface-2: #1b3e48; --surface-hover: #234a55; --border: #2a4d57; --border-strong: #37606b; --text: #eaf2f4; --text-muted: #9fb2b9; --text-subtle: #6f858d; --text-inverse: #0d2027; --primary: #35b0c6; /* lifted for contrast on dark */ --primary-hover: #4fc3dc; --primary-active: #63cee4; --primary-subtle: #14323b; /* deep tinted fill */ --primary-border: #2a6a78; --on-primary: #06222a; --accent: #9aa9b0; --accent-subtle: #1b3e48; /* brighten status + chart hues so they read on dark */ --success: #35c398; --warning: #e6b24d; --danger: #e56c79; --info: #35b0c6; --chart-1: #35b0c6; --chart-2: #9aa9b0; --chart-3: #63c2d3; --chart-4: #1699b4; --chart-5: #6fcfaa; --chart-6: #d4b573; --focus-ring: rgba(53, 176, 198, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.4); } } /* Manual dark toggle: */ [data-theme="dark"] { --bg: #0d2027; --bg-elevated: #102931; --surface: #14323b; --surface-2: #1b3e48; --surface-hover: #234a55; --border: #2a4d57; --border-strong: #37606b; --text: #eaf2f4; --text-muted: #9fb2b9; --text-subtle: #6f858d; --text-inverse: #0d2027; --primary: #35b0c6; --primary-hover: #4fc3dc; --primary-active: #63cee4; --primary-subtle: #14323b; --primary-border: #2a6a78; --on-primary: #06222a; --accent: #9aa9b0; --accent-subtle: #1b3e48; --success: #35c398; --warning: #e6b24d; --danger: #e56c79; --info: #35b0c6; --chart-1: #35b0c6; --chart-2: #9aa9b0; --chart-3: #63c2d3; --chart-4: #1699b4; --chart-5: #6fcfaa; --chart-6: #d4b573; --focus-ring: rgba(53, 176, 198, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.4); }