/* * Pitié DA (Direction Artistique) — design tokens. * Single source of truth for color, type, elevation and chart palettes. * All custom properties are namespaced "--pitie-*" so this file can be * dropped into another site's without colliding with its tokens. * assets/js/pitie-app.js reads the --pitie-chart-* / --pitie-map-* tokens * at runtime (getComputedStyle) so Chart.js/Plotly colors stay in sync * with this file — change a color here, charts follow automatically. */ :root { /* Brand */ --pitie-blue: #0055A4; --pitie-blue-dark: #003d7a; --pitie-blue-light: #1E90FF; /* Grays */ --pitie-gray-50: #f9fafb; --pitie-gray-100: #f3f4f6; --pitie-gray-300: #d1d5db; --pitie-gray-500: #6b7280; --pitie-gray-600: #4b5563; --pitie-gray-700: #374151; --pitie-gray-800: #1f2937; /* Feedback */ --pitie-success-bg: #d4edda; --pitie-success-text: #155724; --pitie-danger: #dc2626; /* Typography */ --pitie-font-family: 'Inter', sans-serif; /* Elevation */ --pitie-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --pitie-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Radius */ --pitie-radius-sm: 6px; --pitie-radius-md: 8px; --pitie-radius-lg: 15px; --pitie-radius-pill: 30px; /* Chart palette — sequential blues (pie charts, map fill) */ --pitie-chart-seq-1: #0055A4; --pitie-chart-seq-2: #1E90FF; --pitie-chart-seq-3: #4682B4; --pitie-chart-seq-4: #87CEEB; --pitie-chart-seq-5: #ADD8E6; --pitie-chart-seq-6: #B0C4DE; --pitie-chart-seq-7: #6495ED; --pitie-chart-seq-8: #00BFFF; --pitie-chart-seq-9: #5F9EA0; --pitie-chart-seq-10: #778899; --pitie-chart-seq-11: #0D6EFD; --pitie-chart-seq-12: #A9A9A9; /* Chart palette — categorical (violin plots: jobs / causes) */ --pitie-chart-cat-1: #e74c3c; --pitie-chart-cat-2: #3498db; --pitie-chart-cat-3: #2ecc71; --pitie-chart-cat-4: #f39c12; --pitie-chart-cat-5: #9b59b6; --pitie-chart-cat-6: #1abc9c; --pitie-chart-cat-7: #e67e22; --pitie-chart-cat-8: #34495e; --pitie-chart-cat-9: #16a085; --pitie-chart-cat-10: #c0392b; --pitie-chart-cat-11: #2980b9; --pitie-chart-cat-12: #27ae60; --pitie-chart-cat-13: #8e44ad; --pitie-chart-cat-14: #d35400; --pitie-chart-cat-15: #1abc9c; --pitie-chart-cat-16: #7f8c8d; --pitie-chart-cat-17: #2c3e50; --pitie-chart-cat-18: #f1c40f; /* Chart palette — sex comparisons (age pyramid, name charts) */ --pitie-chart-male: #1E90FF; --pitie-chart-male-1: #1a5276; --pitie-chart-male-2: #2980b9; --pitie-chart-male-3: #5dade2; --pitie-chart-female: #FF69B4; --pitie-chart-female-1: #922b21; --pitie-chart-female-2: #c0392b; --pitie-chart-female-3: #e74c3c; /* Chart palette — seasonality band */ --pitie-chart-mean-line: #2980b9; --pitie-chart-peak-line: #c0392b; --pitie-chart-band-fill: rgba(41, 128, 185, 0.2); /* Map */ --pitie-map-empty: #f0f0f0; --pitie-map-stroke: #333333; --pitie-map-tooltip-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }