update

data/frontend/static/css/variables.css

@@ -0,0 +1,59 @@
+:root {
+  /* Couleurs principales */
+  --bg: linear-gradient(135deg, #1e1e2f 0%, #16213e 100%);
+  --bg-solid: #1e1e2f;
+  --card: rgba(44, 44, 62, 0.8);
+  --card-hover: rgba(58, 58, 82, 0.9);
+  --text: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.7);
+  --accent: #4fc3f7;
+  --accent-hover: #29b6f6;
+  --hover: #3a3a52;
+  
+  /* Couleurs de service */
+  --nextcloud: #0082c9;
+  --wekan: #d32f2f;
+  --forgejo: #609926;
+  --ai: #9c27b0;
+  
+  /* Couleurs de statut */
+  --success: #4caf50;
+  --warning: #ff9800;
+  --error: #f44336;
+  --info: #2196f3;
+
+  /* Typographie */
+  --font-main: 'Inter', 'Segoe UI', sans-serif;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Espacements */
+  --border-radius: 16px;
+  --border-radius-small: 8px;
+  --border-radius-large: 24px;
+  --padding-base: 1.5rem;
+  --padding-small: 1rem;
+  --padding-large: 2rem;
+  --gap-small: 1rem;
+  --gap-medium: 1.5rem;
+  --gap-large: 2rem;
+
+  /* Ombres */
+  --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.2);
+  --shadow-glow: 0 0 20px rgba(79, 195, 247, 0.3);
+
+  /* Transitions */
+  --transition-fast: 0.2s ease;
+  --transition-medium: 0.3s ease;
+  --transition-slow: 0.5s ease;
+
+  /* Breakpoints */
+  --mobile: 768px;
+  --tablet: 1024px;
+  --desktop: 1200px;
+}