/* ================================================================
   COLORS.CSS — Palette : Bleu marine + Orange signal
   Urgence / réactivité — plomberie dépannage
   ================================================================ */

:root {

    /* === ORANGE (marque principale / CTA) === */
    --color-primary: #f05a00;
    --color-primary-rgb: 240, 90, 0;

    /* === BLEUS MARINE === */
    --color-secondary-light: #2e6088;
    --color-secondary: #1a3d5c;
    --color-secondary-dark: #0d2b45;
    --color-secondary-rgb: 26, 61, 92;

    --color-link: #90e0ef;

    /* === ACCENT (orange clair) === */
    --color-accent: #f05a00;
    --color-accent-light: #f7931e;
    --color-accent-rgb: 240, 90, 0;

    /* === VERT (validation / WhatsApp) === */
    --color-success: #22c55e;
    --color-whatsapp: #22c55e;
    --color-whatsapp-dark: #128c7e;

    /* === TEXTES === */
    --color-text-dark: #1f2937;
    --color-text-light: #ffffff;

    /* === GRIS === */
    --color-gray-light: #f4f4f4;
    --color-gray: #9ca3af;
    --color-gray-dark: #374151;

    /* === DIVERS === */
    --color-black: #000000;
    --color-white: #ffffff;

    /* === GRADIENTS RÉUTILISABLES === */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent-light));
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary-light));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    --gradient-orange-red: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    --gradient-whatsapp: linear-gradient(135deg, var(--color-whatsapp), var(--color-whatsapp-dark));

    /* === OMBRES COLORÉES === */
    --shadow-primary:         0 4px 12px rgba(var(--color-primary-rgb), 0.3);
    --shadow-primary-hover:   0 6px 16px rgba(var(--color-primary-rgb), 0.4);
    --shadow-secondary:       0 4px 12px rgba(var(--color-secondary-rgb), 0.3);
    --shadow-secondary-hover: 0 6px 16px rgba(var(--color-secondary-rgb), 0.4);
    --shadow-accent:          0 4px 12px rgba(var(--color-accent-rgb), 0.3);
    --shadow-accent-hover:    0 6px 16px rgba(var(--color-accent-rgb), 0.4);
}
