first commit

frontend/app/css/colors.css

@@ -0,0 +1,69 @@
+/* Design tokens — CV/Portfolio blanc & orange */
+:root {
+    /* Couleurs de base (clair) */
+    --color-bg: #ffffff;
+    --color-surface: #ffffff;
+    --color-text: #1f2937;
+    --color-muted: #6b7280;
+    --color-border: #efefef;
+    --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;
+        --color-text: #e5e7eb;
+        --color-muted: #9ca3af;
+        --color-border: #0b0f14;
+        /* accent inchangé pour la cohérence de marque */
+    }
+}
+
+/* Thème forcé via data-attribute */
+html[data-theme="light"] {
+    --color-bg: #ffffff;
+    --color-surface: #FFF7F7;
+    --color-text: #1f2937;
+    --color-muted: #6b7280;
+    --color-border: #efefef;
+}
+
+html[data-theme="dark"] {
+    --color-bg: #1f2937;
+    --color-surface: #0e141b;
+    --color-text: #e5e7eb;
+    --color-muted: #9ca3af;
+    --color-border: #0b0f14;
+    --color-accent-50: #041D36;
+}