/* * Revly Mobile Auto Care - color palette ("Electric blue") * Drop this file in and use the semantic --color-* variables in components. * Add class="theme-dark" (or data-theme="dark") to any section to flip it to the dark palette. */ :root { /* Brand colors */ --revly-midnight: #0B1422; /* Midnight */ --revly-navy: #17263D; /* Navy */ --revly-blue: #2563FF; /* Revly Blue */ --revly-electric: #5C97FF; /* Electric */ --revly-steel: #8893A5; /* Steel */ --revly-paper: #F3F5F8; /* Paper */ --revly-white: #FFFFFF; /* White */ --revly-signal: #FFAB26; /* Signal */ /* blue scale */ --blue-50: #F0F6FF; --blue-100: #DEECFF; --blue-200: #BFDAFF; --blue-300: #94BEFF; --blue-400: #5C97FF; --blue-500: #2563FF; --blue-600: #1E4BDF; --blue-700: #1C3CB3; --blue-800: #162F86; --blue-900: #10255D; --blue-950: #091738; /* neutral scale */ --neutral-50: #F3F5F8; --neutral-100: #E6EAEF; --neutral-200: #D3D8E0; --neutral-300: #B3BBC8; --neutral-400: #8893A5; --neutral-500: #626E81; --neutral-600: #4A566A; --neutral-700: #303E53; --neutral-800: #17263D; --neutral-900: #0B1422; --neutral-950: #050A14; /* green scale */ --green-50: #E8FCEC; --green-100: #CEF7D7; --green-200: #A5EBB7; --green-300: #71D790; --green-400: #3ABF6D; --green-500: #00A453; --green-600: #008743; --green-700: #006C35; --green-800: #005226; --green-900: #023B1B; --green-950: #042510; /* amber scale */ --amber-50: #FFF6E3; --amber-100: #FFEAC2; --amber-200: #FFDA97; --amber-300: #FFC669; --amber-400: #FFAB26; --amber-500: #F1900D; --amber-600: #CE710C; --amber-700: #A45714; --amber-800: #7B4112; --amber-900: #572F0D; --amber-950: #361D07; /* red scale */ --red-50: #FFF2F1; --red-100: #FFE3E0; --red-200: #FFC8C2; --red-300: #FFA097; --red-400: #FE7067; --red-500: #E94743; --red-600: #C9292C; --red-700: #A31C20; --red-800: #7E1416; --red-900: #5C0E0F; --red-950: #3A0A0A; } /* Light (default). Also use .theme-light to put a light section inside a dark page. */ :root, [data-theme="light"], .theme-light { --color-bg: #FFFFFF; --color-bg-alt: var(--neutral-50); --color-surface: #FFFFFF; --color-surface-alt: var(--neutral-50); --color-text: var(--neutral-900); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-accent: var(--blue-500); --color-accent-hover: var(--blue-600); --color-accent-active: var(--blue-700); --color-on-accent: #FFFFFF; --color-accent-subtle: var(--blue-50); --color-on-accent-subtle: var(--blue-700); --color-link: var(--blue-600); --color-link-hover: var(--blue-700); --color-icon: var(--neutral-900); --color-icon-accent: var(--blue-500); --color-focus: var(--blue-500); --color-success: var(--green-600); --color-success-subtle: var(--green-50); --color-on-success-subtle: var(--green-700); --color-warning: var(--amber-400); --color-warning-subtle: var(--amber-50); --color-on-warning-subtle: var(--amber-700); --color-danger: var(--red-600); --color-danger-subtle: var(--red-50); --color-on-danger-subtle: var(--red-700); --color-star: var(--amber-500); color-scheme: light; } /* Dark. Put class="theme-dark" on any section (or data-theme="dark" on ). */ [data-theme="dark"], .theme-dark { --color-bg: var(--neutral-900); --color-bg-alt: var(--neutral-950); --color-surface: var(--neutral-800); --color-surface-alt: var(--neutral-700); --color-text: #FFFFFF; --color-text-muted: var(--neutral-300); --color-text-subtle: var(--neutral-400); --color-border: var(--neutral-700); --color-border-strong: var(--neutral-600); --color-accent: var(--blue-500); --color-accent-hover: var(--blue-600); --color-accent-active: var(--blue-700); --color-on-accent: #FFFFFF; --color-accent-subtle: var(--blue-900); --color-on-accent-subtle: var(--blue-200); --color-link: var(--blue-300); --color-link-hover: var(--blue-200); --color-icon: #FFFFFF; --color-icon-accent: var(--blue-400); --color-focus: var(--blue-300); --color-success: var(--green-400); --color-success-subtle: var(--green-900); --color-on-success-subtle: var(--green-200); --color-warning: var(--amber-400); --color-warning-subtle: var(--amber-900); --color-on-warning-subtle: var(--amber-200); --color-danger: var(--red-400); --color-danger-subtle: var(--red-900); --color-on-danger-subtle: var(--red-200); --color-star: var(--amber-400); color-scheme: dark; } .theme-light, .theme-dark { color: var(--color-text); }