/* ================================================================
   COLORS.CSS — Palette : Violet-indigo + Jaune signal
   Urgence / réactivité — plomberie dépannage
   ================================================================ */

:root {

    /* === JAUNE SIGNAL (marque principale / CTA) === */
    --color-primary: #fffd00;
    --color-primary-text: #000000;   /* texte sur fond primary — toujours noir */
    --color-primary-rgb: 255, 253, 0;

    /* === VIOLETS INDIGO === */
    --color-secondary-light: #7c3aed;
    --color-secondary: #4c1d95;
    --color-secondary-dark: #2e1065;
    --color-secondary-rgb: 76, 29, 149;

    --color-link: #c4b5fd;

    /* === ACCENT (jaune légèrement plus chaud — badges, highlights) === */
    --color-accent: #fffd00;
    --color-accent-light: #fde047;
    --color-accent-rgb: 255, 253, 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-cta:       linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary));
    --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.4);
    --shadow-primary-hover:   0 6px 16px rgba(var(--color-primary-rgb), 0.55);
    --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.4);
    --shadow-accent-hover:    0 6px 16px rgba(var(--color-accent-rgb), 0.55);
}