/* ============================================================
   SPITEX MEDICARE — colors.css
   Generated from brand guidelines (flyer + brief)
   ============================================================ */

:root {
    /* ── Primary ── */
    --color-green:          #1F9B47;
    --color-blue:           #1862A4;

    /* ── Gradient ── */
    --gradient-primary:     linear-gradient(135deg, var(--color-blue) 0%, var(--color-green) 100%);
    --gradient-primary-h:   linear-gradient(90deg, var(--color-blue) 0%, var(--color-green) 100%);
    --gradient-primary-v:   linear-gradient(180deg, var(--color-blue) 0%, var(--color-green) 100%);

    /* ── Neutrals ── */
    --color-black:          #111111;
    --color-dark:           #1A1A2E;
    --color-body:           #3A3A4A;
    --color-muted:          #6B7280;
    --color-silver:         #9CA3AF;
    --color-light-gray:     #E5E7EB;
    --color-off-white:      #F5F7FA;
    --color-white:          #FFFFFF;

    /* ── Semantic ── */
    --color-navigation:     var(--color-white);
    --color-navigation-scrolled: var(--color-white);
    --color-button:         var(--color-green);
    --color-button-hover:   #178A3D;
    --color-button-blue:    var(--color-blue);
    --color-button-blue-hover: #145A96;
    --color-card:           var(--color-white);
    --color-overline:       var(--color-green);
    --color-footer:         var(--color-dark);

    /* ── WhatsApp ── */
    --color-whatsapp:       #25D366;
    --color-whatsapp-hover: #20BD5A;
}

/* ============================================================
   COLOR UTILITIES
   ============================================================ */

/* ── Text Colors ── */
.color-green           { color: var(--color-green) !important; }
.color-blue            { color: var(--color-blue) !important; }
.color-black           { color: var(--color-black) !important; }
.color-dark            { color: var(--color-dark) !important; }
.color-body            { color: var(--color-body) !important; }
.color-muted           { color: var(--color-muted) !important; }
.color-silver          { color: var(--color-silver) !important; }
.color-white           { color: var(--color-white) !important; }
.color-overline        { color: var(--color-overline) !important; }

/* ── Background Colors ── */
.background-green      { background-color: var(--color-green) !important; }
.background-blue       { background-color: var(--color-blue) !important; }
.background-black      { background-color: var(--color-black) !important; }
.background-dark       { background-color: var(--color-dark) !important; }
.background-body       { background-color: var(--color-body) !important; }
.background-muted      { background-color: var(--color-muted) !important; }
.background-light-gray { background-color: var(--color-light-gray) !important; }
.background-off-white  { background-color: var(--color-off-white) !important; }
.background-white      { background-color: var(--color-white) !important; }
.background-card       { background-color: var(--color-card) !important; }
.background-navigation { background-color: var(--color-navigation) !important; }
.background-footer     { background-color: var(--color-footer) !important; }
.background-whatsapp   { background-color: var(--color-whatsapp) !important; }

/* ── Gradient Backgrounds ── */
.background-gradient          { background: var(--gradient-primary) !important; }
.background-gradient-h        { background: var(--gradient-primary-h) !important; }
.background-gradient-v        { background: var(--gradient-primary-v) !important; }

/* ── Border Colors ── */
.border-green          { border-color: var(--color-green) !important; }
.border-blue           { border-color: var(--color-blue) !important; }
.border-light-gray     { border-color: var(--color-light-gray) !important; }
.border-silver         { border-color: var(--color-silver) !important; }