79 lines
No EOL
2.3 KiB
CSS
79 lines
No EOL
2.3 KiB
CSS
/* Design tokens — CV/Portfolio blanc & orange */
|
||
:root {
|
||
/* Couleurs de base (clair) */
|
||
--color-bg: #ffffff;
|
||
--color-surface: #ffffff;
|
||
/* Légèrement plus foncé pour champs en clair */
|
||
--color-form-surface: color-mix(in oklab, var(--color-surface) 94%, black);
|
||
--color-text: #1f2937;
|
||
--color-muted: #6b7280;
|
||
--color-border: #efefef;
|
||
--color-border-strong: #d1d5db;
|
||
--color-accent: #ff6b35;
|
||
|
||
/* Variantes d’accent */
|
||
--color-accent-50: #fff4ec;
|
||
--color-accent-100: #ffe4d6;
|
||
--color-accent-200: #ffcfba;
|
||
--color-accent-600: #e55a2b;
|
||
--color-accent-700: #c74d25;
|
||
|
||
/* Rayons et ombres */
|
||
--radius-sm: 6px;
|
||
--radius-md: 10px;
|
||
--radius-lg: 14px;
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||
--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||
|
||
/* Layout */
|
||
--header-height: 80px;
|
||
--container-max: 1100px;
|
||
|
||
/* Espacements */
|
||
--space-1: 0.25rem;
|
||
--space-2: 0.5rem;
|
||
--space-3: 0.75rem;
|
||
--space-4: 1rem;
|
||
--space-5: 1.25rem;
|
||
--space-6: 1.5rem;
|
||
--space-8: 2rem;
|
||
--space-12: 3rem;
|
||
--space-16: 4rem;
|
||
}
|
||
|
||
/* Thème sombre (préférence système par défaut) */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-bg: #1f2937;
|
||
--color-surface: #0e141b;
|
||
/* Légèrement plus clair pour champs en sombre */
|
||
--color-form-surface: color-mix(in oklab, var(--color-surface) 92%, white);
|
||
--color-text: #e5e7eb;
|
||
--color-muted: #9ca3af;
|
||
--color-border: #0b0f14;
|
||
--color-border-strong: #263241;
|
||
/* accent inchangé pour la cohérence de marque */
|
||
}
|
||
}
|
||
|
||
/* Thème forcé via data-attribute */
|
||
html[data-theme="light"] {
|
||
--color-bg: #ffffff;
|
||
--color-surface: #FFF7F7;
|
||
/* Légèrement plus foncé pour champs en clair */
|
||
--color-form-surface: color-mix(in oklab, var(--color-surface) 94%, black);
|
||
--color-text: #1f2937;
|
||
--color-muted: #6b7280;
|
||
--color-border: #efefef;
|
||
}
|
||
|
||
html[data-theme="dark"] {
|
||
--color-bg: #1f2937;
|
||
--color-surface: #0e141b;
|
||
/* Légèrement plus clair pour champs en sombre */
|
||
--color-form-surface: color-mix(in oklab, var(--color-surface) 92%, white);
|
||
--color-text: #e5e7eb;
|
||
--color-muted: #9ca3af;
|
||
--color-border: #0b0f14;
|
||
--color-accent-50: #041D36;
|
||
} |