/* ========================================================== PROJECT : SITE-GENERIQUE FILE : css/color-primary.css AUTH : Renaud CREATED : 14 novembre 2025 UPDATED : 04 mars 2026 ========================================================== */ /** * @project SITE-GENERIQUE * @description Palette de couleurs primaires du projet (Tokens primitifs). * Contient tous les dégradés de teintes avec leurs variantes shadow. * Source unique pour alimenter colors-semantic.css. * * @file css/colors-primary.css * * @note ⚠️ CE FICHIER DOIT ÊTRE CHARGÉ AVANT colors-semantic.css * Les valeurs HEX et RGBA sont synchronisées. * Luminosité : 230 (ultra clair) → 030 (ultra foncé) * Shadow : alpha 0.7 pour toutes les teintes */ :root { /* --- COULEURS DE BASE --- */ --color-white: #FFFFFF; --color-black: #000000; /* --- DÉGRADÉ DE GRIS --- */ --color-grey-230: #F4F4F4; /* rgba(244, 244, 244, 1) - Gris ultra clair - Lum 230 */ --color-grey-220: #E9E9E9; /* rgba(233, 233, 233, 1) - Gris très clair - Lum 220 */ --color-grey-180: #BFBFBF; /* rgba(191, 191, 191, 1) - Gris argent - Lum 180 */ --color-grey-120: #7F7F7F; /* rgba(127, 127, 127, 1) - Gris primaire - Lum 120 */ --color-grey-090: #5F5F5F; /* rgba( 95, 95, 95, 1) - Gris foncé - Lum 90 */ --color-grey-060: #3F3F3F; /* rgba( 63, 63, 63, 1) - Gris anthracite - Lum 60 */ --color-grey-030: #1F1F1F; /* rgba( 31, 31, 31, 1) - Gris ultra foncé - Lum 30 */ --color-grey-120-shadow: rgba(127, 127, 127, 0.7); /* Gris primaire - Lum 120 */ --color-grey-090-shadow: rgba( 95, 95, 95, 0.7); /* Gris foncé - Lum 90 */ --color-grey-060-shadow: rgba( 63, 63, 63, 0.7); /* Gris anthracite - Lum 60 */ --color-grey-030-shadow: rgba( 31, 31, 31, 0.7); /* Gris ultra foncé - Lum 30 */ /* --- DÉGRADÉ DE ROUGE --- */ --color-red-230: #FFEDEA; /* rgba(255, 237, 234, 1) - Rose très clair - Lum 230 */ --color-red-220: #FFDAD5; /* rgba(255, 218, 213, 1) - Rose pâle - Lum 220 */ --color-red-180: #FF8F80; /* rgba(255, 143, 128, 1) - Rouge saumon - Lum 180 */ --color-red-120: #FF2000; /* rgba(255, 32, 0, 1) - Rouge primaire - Lum 120 */ --color-red-090: #BF1800; /* rgba(191, 24, 0, 1) - Rouge brique - Lum 90 */ --color-red-060: #801000; /* rgba(128, 16, 0, 1) - Rouge bordeaux - Lum 60 */ --color-red-030: #400900; /* rgba( 64, 9, 0, 1) - Rouge marron - Lum 30 */ --color-red-120-shadow: rgba(255, 32, 0, 0.7); /* Rouge primaire - Lum 120 */ --color-red-090-shadow: rgba(191, 24, 0, 0.7); /* Rouge brique - Lum 90 */ --color-red-060-shadow: rgba(128, 16, 0, 0.7); /* Rouge bordeaux - Lum 60 */ --color-red-030-shadow: rgba( 64, 9, 0, 0.7); /* Rouge marron - Lum 30 */ /* --- DÉGRADÉ DE VERT --- */ --color-green-230: #EFFFEA; /* rgba(239, 255, 234, 1) - Vert menthe pâle - Lum 230 */ --color-green-220: #DFFFD5; /* rgba(223, 255, 213, 1) - Vert clair - Lum 220 */ --color-green-180: #9FFF80; /* rgba(159, 255, 128, 1) - Vert pomme - Lum 180 */ --color-green-120: #40FF00; /* rgba( 64, 255, 0, 1) - Vert Lime - Lum 120 */ --color-green-090: #30BF00; /* rgba( 48, 191, 0, 1) - Vert prairie - Lum 90 */ --color-green-060: #208000; /* rgba( 32, 128, 0, 1) - Vert sapin - Lum 60 */ --color-green-030: #104000; /* rgba( 16, 64, 0, 1) - Vert très sombre - Lum 30 */ --color-green-120-shadow: rgba( 64, 255, 0, 0.7); /* Vert Lime - Lum 120 */ --color-green-090-shadow: rgba( 48, 191, 0, 0.7); /* Vert prairie - Lum 90 */ --color-green-060-shadow: rgba( 32, 128, 0, 0.7); /* Vert sapin - Lum 60 */ --color-green-030-shadow: rgba( 16, 64, 0, 0.7); /* Vert très sombre - Lum 30 */ /* --- DÉGRADÉ DE BLEU --- */ --color-blue-230: #EAF4FF; /* rgba(234, 244, 255, 1) - Bleu givré - Lum 230 */ --color-blue-220: #D5EAFF; /* rgba(213, 234, 255, 1) - Bleu ciel clair - Lum 220 */ --color-blue-180: #80BFFF; /* rgba(128, 191, 255, 1) - Bleu horizon - Lum 180 */ --color-blue-120: #0080FF; /* rgba( 0, 128, 255, 1) - Bleu azur - Lum 120 */ --color-blue-090: #0060BF; /* rgba( 0, 96, 191, 1) - Bleu saphir - Lum 90 */ --color-blue-060: #004080; /* rgba( 0, 64, 128, 1) - Bleu nuit - Lum 60 */ --color-blue-030: #002040; /* rgba( 0, 32, 64, 1) - Bleu minuit - Lum 30 */ --color-blue-120-shadow: rgba( 0, 128, 255, 0.7); /* Bleu azur - Lum 120 */ --color-blue-090-shadow: rgba( 0, 96, 191, 0.7); /* Bleu saphir - Lum 90 */ --color-blue-060-shadow: rgba( 0, 64, 128, 0.7); /* Bleu nuit - Lum 60 */ --color-blue-030-shadow: rgba( 0, 32, 64, 0.7); /* Bleu minuit - Lum 30 */ /* --- DÉGRADÉ DE ORANGE --- */ --color-orange-230: #FFF2EA; /* rgba(255, 242, 234, 1) - Blanc cassé orangé - Lum 230 */ --color-orange-220: #FFE4D5; /* rgba(255, 228, 213, 1) - Pêche clair - Lum 220 */ --color-orange-180: #FFB080; /* rgba(255, 175, 128, 1) - Corail pale - Lum 180 */ --color-orange-120: #FF6000; /* rgba(255, 96, 0, 1) - Orange vif - Lum 120 */ --color-orange-090: #BF4800; /* rgba(191, 72, 0, 1) - Orange brulé - Lum 90 */ --color-orange-060: #803000; /* rgba(128, 48, 0, 1) - Marron terre - Lum 60 */ --color-orange-030: #401800; /* rgba( 64, 24, 0, 1) - Chocolat noir - Lum 30 */ --color-orange-120-shadow: rgba(255, 96, 0, 0.7); /* Orange vif - Lum 120 */ --color-orange-090-shadow: rgba(191, 72, 0, 0.7); /* Orange brulé - Lum 90 */ --color-orange-060-shadow: rgba(128, 48, 0, 0.7); /* Marron terre - Lum 60 */ --color-orange-030-shadow: rgba( 64, 24, 0, 0.7); /* Chocolat noir - Lum 30 */ /* --- DÉGRADÉ DE JAUNE --- */ --color-yellow-230: #FFFFEA; /* rgba(255, 255, 234, 1) - Jaune très pale - Lum 230 */ --color-yellow-220: #FFFFD5; /* rgba(255, 255, 213, 1) - Jaune crème - Lum 220 */ --color-yellow-180: #FFFF80; /* rgba(255, 255, 128, 1) - Jaune citron pale - Lum 180 */ --color-yellow-120: #FFFF00; /* rgba(255, 255, 0, 1) - Jaune primaire - Lum 120 */ --color-yellow-090: #BFBF00; /* rgba(191, 191, 0, 1) - Jaune olive - Lum 90 */ --color-yellow-060: #808000; /* rgba(128, 128, 0, 1) - Olive - Lum 60 */ --color-yellow-030: #404000; /* rgba( 64, 64, 0, 1) - Olive sombre - Lum 30 */ --color-yellow-120-shadow: rgba(255, 255, 0, 0.7); /* Jaune primaire - Lum 120 */ --color-yellow-090-shadow: rgba(191, 191, 0, 0.7); /* Jaune olive - Lum 90 */ --color-yellow-060-shadow: rgba(128, 128, 0, 0.7); /* Olive - Lum 60 */ --color-yellow-030-shadow: rgba( 64, 64, 0, 0.7); /* Olive sombre - Lum 30 */ /* --- DÉGRADÉ DE VIOLET --- */ --color-purple-230: #F4EAFF; /* rgba(244, 234, 255, 1) - Lavande très pâle - Lum 230 */ --color-purple-220: #EAD5FF; /* rgba(234, 213, 255, 1) - Lavande clair - Lum 220 */ --color-purple-180: #BF80FF; /* rgba(191, 128, 255, 1) - Mauve vif - Lum 180 */ --color-purple-120: #8000FF; /* rgba(128, 0, 255, 1) - Violet primaire - Lum 120 */ --color-purple-090: #5A00BF; /* rgba( 90, 0, 191, 1) - Violet profond - Lum 90 */ --color-purple-060: #400080; /* rgba( 64, 0, 128, 1) - Indigo / Byzantium - Lum 60 */ --color-purple-030: #200040; /* rgba( 32, 0, 64, 1) - Violet très foncé - Lum 30 */ --color-purple-120-shadow: rgba(128, 0, 255, 0.7); /* Violet primaire - Lum 120 */ --color-purple-090-shadow: rgba( 90, 0, 191, 0.7); /* Violet profond - Lum 90 */ --color-purple-060-shadow: rgba( 64, 0, 128, 0.7); /* Indigo / Byzantium - Lum 60 */ --color-purple-030-shadow: rgba( 32, 0, 64, 0.7); /* Violet très foncé - Lum 30 */ }