/* ============================================================
   LivingTech GmbH — colors.css
   All colors from Figma. Every utility uses var() references.
   ============================================================ */

   :root {
    /* ── Core ── */
    --color-black:          #000000;
    --color-white:          #FFFFFF;

    /* ── Accent ── */
    --color-accent:         #d8e803;
    --color-red:            #F22462;
    --color-hover:            #d8e803;

    /* ── Grays ── */
    --color-dark-gray:      #4B4B54;
    --color-gray:           #91919C;
    --color-muted:          #A2A2AE;
    --color-silver:         #BFBCC9;
    --color-light-gray:     #f7f7f7;
}


/* ── Color (text) utilities ── */

.color-black            { color: var(--color-black) !important; }
.color-white            { color: var(--color-white) !important; }
.color-accent           { color: var(--color-accent) !important; }
.color-red              { color: var(--color-red) !important; }
.color-dark-gray        { color: var(--color-dark-gray) !important; }
.color-gray             { color: var(--color-gray) !important; }
.color-muted            { color: var(--color-muted) !important; }
.color-silver           { color: var(--color-silver) !important; }
.color-light-gray       { color: var(--color-light-gray) !important; }
.color-hover            { color: var(--color-hover) !important; }


/* ── Background utilities ── */

.background-black       { background-color: var(--color-black) !important; }
.background-white       { background-color: var(--color-white) !important; }
.background-accent      { background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important; }
.background-red         { background-color: var(--color-red) !important; }
.background-dark-gray   { background-color: var(--color-dark-gray) !important; }
.background-gray        { background-color: var(--color-gray) !important; }
.background-muted       { background-color: var(--color-muted) !important; }
.background-silver      { background-color: var(--color-silver) !important; }
.background-light-gray  { background-color: var(--color-light-gray) !important; }
.background-transparent { background-color: transparent !important; }
.background-hover       { background-color: var(--color-hover) !important; }
.background-gradient    { background: linear-gradient(90deg,rgba(246, 233, 241, 1) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgba(227, 249, 234, 1) 100%); }


/* ── Border utilities ── */

.border-black           { border-color: var(--color-black) !important; }
.border-white           { border-color: var(--color-white) !important; }
.border-accent          { border-color: var(--color-accent) !important; }
.border-red             { border-color: var(--color-red) !important; }
.border-dark-gray       { border-color: var(--color-dark-gray) !important; }
.border-gray            { border-color: var(--color-gray) !important; }
.border-muted           { border-color: var(--color-muted) !important; }
.border-silver          { border-color: var(--color-silver) !important; }
.border-light-gray      { border-color: var(--color-light-gray) !important; }