/* ========================================================================== CHKEY.ch — Color tokens Brand red is drawn straight from the shield logo (#CB1C1E / #A02628) and doubles as the Swiss-flag red — trust + Swiss identity in one hue. ========================================================================== */ :root { /* ---- Brand red (primary) ---------------------------------------------- */ --red-50: #FFF1F1; --red-100: #FFDEDE; --red-200: #FFC2C3; --red-300: #F58E90; --red-400: #E8494C; --red-500: #CB1C1E; /* logo bright red — primary brand */ --red-600: #A02628; /* logo deep red — hover / pressed */ --red-700: #7F1D1D; --red-800: #5E1516; --red-900: #3F0E0F; /* ---- Ink / neutral (cool slate) --------------------------------------- */ --ink-950: #0E1116; /* near-black — display headings */ --ink-900: #14181F; --ink-800: #212632; --ink-700: #333944; /* body text */ --ink-600: #4C525E; --ink-500: #6A707B; /* muted — matches legacy #666 wordmark */ --ink-400: #939AA5; /* placeholder / disabled text */ --ink-300: #C1C7D0; /* strong borders, dividers */ --ink-200: #E1E5EA; /* default border */ --ink-150: #EBEEF2; --ink-100: #F2F4F7; /* subtle fill */ --ink-50: #F8FAFC; /* page tint */ --white: #FFFFFF; /* ---- Support / semantic hues ------------------------------------------ */ --green-50: #E7F7EE; --green-500: #12925A; /* in stock, instant delivery, secure */ --green-600: #0E784A; --amber-50: #FFF6E5; --amber-400: #F5A623; /* rating stars */ --amber-500: #E8930C; /* deals / limited offers */ --blue-50: #EAF1FE; --blue-500: #2563EB; /* neutral info / platform accents (used sparingly) */ /* ---- Accents secondaires (palette complémentaire au rouge) ------------- */ --petrole-50: #E3F2F4; --petrole-500: #0F6E7C; /* complémentaire directe du rouge — Logiciels */ --petrole-600: #155E69; --marine-50: #EAF1F8; --marine-400: #2C5282; --marine-500: #1E3A5F; /* confiance suisse — Server */ /* ---- Swiss flag utility ----------------------------------------------- */ --swiss-red: #D8232A; /* ====================================================================== Semantic aliases — reference THESE in components, not raw scales. ====================================================================== */ /* Brand & actions */ --color-primary: var(--red-500); --color-primary-hover: var(--red-600); --color-primary-active: var(--red-700); --color-primary-tint: var(--red-50); --color-on-primary: var(--white); /* Text */ --text-strong: var(--ink-950); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-on-dark: var(--white); --text-link: var(--red-600); /* Surfaces */ --surface-page: var(--ink-50); --surface-card: var(--white); --surface-sunken: var(--ink-100); --surface-inverse: var(--ink-950); --surface-tint: var(--red-50); /* Borders & lines */ --border: var(--ink-200); --border-strong: var(--ink-300); --border-focus: var(--red-500); /* Status */ --status-success: var(--green-500); --status-success-tint: var(--green-50); --status-warning: var(--amber-500); --status-warning-tint: var(--amber-50); --status-danger: var(--red-500); --status-danger-tint: var(--red-50); --status-info: var(--blue-500); --status-info-tint: var(--blue-50); --rating-star: var(--amber-400); /* Focus ring */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--red-500) 35%, transparent); /* ---- Accent néon (mode sombre uniquement) ------------------------------ */ --cyan-500: #22C8D6; } /* ========================================================================== Thème sombre — bascule via [data-theme="dark"] sur . Rouge réservé aux CTA/actions, cyan pour prix/liens (cf. maquette "encre + rouge + cyan électrique"). Surfaces teintées bleu marine (--marine-500) plutôt qu'un gris neutre, pour que le bleu de la palette secondaire soit bien présent dans le thème sombre. On ne réécrit que les alias sémantiques : tous les composants qui les référencent s'adaptent automatiquement. ========================================================================== */ [data-theme="dark"] { --text-strong: #FFFFFF; --text-body: #C7CCD6; --text-muted: #8B93A1; --text-faint: #5C6472; --text-on-dark: #FFFFFF; --text-link: var(--cyan-500); --surface-page: var(--ink-950); --surface-card: color-mix(in srgb, var(--marine-500) 55%, var(--ink-950)); --surface-sunken: color-mix(in srgb, var(--marine-500) 70%, var(--ink-950)); --surface-inverse: #FFFFFF; --surface-tint: color-mix(in srgb, var(--red-500) 16%, transparent); --border: color-mix(in srgb, var(--marine-400) 45%, var(--ink-950)); --border-strong: color-mix(in srgb, var(--marine-400) 65%, var(--ink-950)); --border-focus: var(--cyan-500); --color-on-primary: #FFFFFF; --status-success-tint: color-mix(in srgb, var(--green-500) 18%, transparent); --status-warning-tint: color-mix(in srgb, var(--amber-500) 18%, transparent); --status-danger-tint: color-mix(in srgb, var(--red-500) 18%, transparent); --status-info-tint: color-mix(in srgb, var(--blue-500) 18%, transparent); color-scheme: dark; }