/* ============================================================ BlueKey — jetons de design. Repris tels quels du DESIGN.md de RedKey (25.09.2026) : plaque gris quasi blanc, surfaces blanches cernées d'un filet, une seule rondeur, une seule ombre pour ce qui flotte. Seule la famille de marque change : --red-* devient --blue-*, accordée aux mêmes contrastes. Focus, statuts, gris et formes sont indépendants de la marque. ============================================================ */ :root { /* Marque : le bleu marque l'action principale, l'état actif, la marque. Jamais un fond de section. */ --blue: #1C6AD0; /* aplats ; --blue-on dessus : 5,1:1 */ --blue-dark: #164FA0; /* clic du bouton principal */ --blue-ink: #164FA0; /* le bleu quand il est du TEXTE (≥ 5,8:1 sur toutes les surfaces) */ --blue-hover: #1A5FBB; --blue-soft: #D6DFEC; /* teinte pâle posée sur la plaque grise */ --blue-soft-strong: #A9BEDD; --blue-border: #B4C6E0; /* bordure d'un champ survolé */ --blue-accent: #6F92C6; --blue-on: #FAFCFF; /* texte posé SUR un aplat bleu */ --blue-tint: #EDF3FC; /* teinte pâle posée sur du blanc : lien actif, survol de ligne */ /* Logo : ses couleurs n'appartiennent qu'à lui, jamais à l'interface. */ --logo-navy: #0F1A30; --logo-blue: #0A74FF; --logo-word: #0F1A30; /* le nom « BlueKey » à côté du pictogramme */ --focus: #5A6069; /* ardoise : ni bleu (actif), ni rouge (erreur) */ --champ-erreur: #C0392B; /* Surfaces */ --bg: #F3F5F8; /* la page */ --paper: #FFFFFF; /* ce qui est posé dessus */ --paper-deep: #EFF1F4; /* ce qui est posé sur --paper */ --text: #33383F; --text-muted: #5A6069; --border: #E7EAEF; /* sépare à l'intérieur d'une surface */ --border-strong: #D6DBE2; /* champs, cases, ascenseurs */ --border-card: #DFE3EA; /* cerne une surface posée sur la page */ --inter-off: #C4C9D1; /* Statuts : toujours le couple texte / fond, jamais un fond recalculé. */ --success: #3E694E; --success-bg: #D3E0D7; --info: #46608A; --info-bg: #D5DDEB; --sky: #456479; --sky-bg: #D4E0E7; --warning: #815923; --warning-bg: #ECE0CB; --orange: #9C4A1A; --orange-bg: #F2DFC8; --violet: #6E5488; --violet-bg: #DFD8E9; --neutral: #5A606A; --neutral-bg: #D9DDE4; --danger: #A9372A; --danger-bg: #ECD7D3; /* Typographie : Poppins pour dire, Inter pour lire. */ --display: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* références, n° de série */ /* Formes */ --radius: 8px; /* un seul rayon pour tout */ --pill: 999px; /* avatars, interrupteurs, points */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* LA seule ombre, pour ce qui flotte (modale, menu, tiroir). Jamais sur une carte. */ --shadow-overlay: 0 0.25rem 1rem rgba(31, 41, 55, 0.10); --overlay: rgba(43, 38, 34, 0.5); /* Mise en page */ --pile: 1.2rem; --pile-liste: 0.4rem; --tap: 44px; /* cible tactile, toujours en px */ --sidebar-w: 16rem; --topbar-h: 4.4rem; --field-nav-h: 64px; color-scheme: light; } /* Thème sombre : les MÊMES jetons, redéfinis (pas inversés). Système par défaut, ou choix explicite data-theme sur . */ /* Sur papier, toujours le thème clair. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --blue: #5A96F0; --blue-dark: #8AB6F5; --blue-ink: #8AB6F5; --blue-hover: #6FA3F2; --blue-soft: #1E2836; --blue-soft-strong: #2F4563; --blue-border: #34496A; --blue-accent: #86A6D0; --blue-on: #0E1726; --blue-tint: #1B2330; --logo-word: #E7E9EC; --focus: #9CA2AC; --champ-erreur: #E0776A; --bg: #17181B; --paper: #1F2124; --paper-deep: #292B2F; --text: #E7E9EC; --text-muted: #9CA2AC; --border: #313339; --border-strong: #3C3F46; --border-card: #383B42; --inter-off: #4A4F58; --success: #7FC08F; --success-bg: #223226; --info: #8FB0DD; --info-bg: #232B3A; --sky: #8FC2DA; --sky-bg: #202E35; --warning: #E0B368; --warning-bg: #382E1C; --orange: #E89A5C; --orange-bg: #3A2A16; --violet: #B9A0D6; --violet-bg: #2E2839; --neutral: #AEB4BE; --neutral-bg: #2A2C31; --danger: #E08A7B; --danger-bg: #38251F; --shadow-overlay: 0 0.25rem 1rem rgba(0, 0, 0, 0.45); } } @media screen { :root[data-theme="dark"] { color-scheme: dark; --blue: #5A96F0; --blue-dark: #8AB6F5; --blue-ink: #8AB6F5; --blue-hover: #6FA3F2; --blue-soft: #1E2836; --blue-soft-strong: #2F4563; --blue-border: #34496A; --blue-accent: #86A6D0; --blue-on: #0E1726; --logo-word: #E7E9EC; --focus: #9CA2AC; --champ-erreur: #E0776A; --bg: #17181B; --paper: #1F2124; --paper-deep: #292B2F; --text: #E7E9EC; --text-muted: #9CA2AC; --border: #313339; --border-strong: #3C3F46; --border-card: #383B42; --inter-off: #4A4F58; --success: #7FC08F; --success-bg: #223226; --info: #8FB0DD; --info-bg: #232B3A; --sky: #8FC2DA; --sky-bg: #202E35; --warning: #E0B368; --warning-bg: #382E1C; --orange: #E89A5C; --orange-bg: #3A2A16; --violet: #B9A0D6; --violet-bg: #2E2839; --neutral: #AEB4BE; --neutral-bg: #2A2C31; --danger: #E08A7B; --danger-bg: #38251F; --shadow-overlay: 0 0.25rem 1rem rgba(0, 0, 0, 0.45); } }