/* ============================================= */
/* ============== SOLARSENSE COLORS ============ */
/* ============================================= */
/* Project: SolarSense GmbH                      */
/* Updated: 2026-02-16                            */
/* ============================================= */

:root {
    /* ---- Primary ---- */
    --color-orange: #E39A24;
    --color-dark-orange: #C98415;
    --color-light-orange: #FBF0DC;

    /* ---- Neutrals ---- */
    --color-white: #FFFFFF;
    --color-off-white: #FAFAF8;
    --color-light-gray: #F2F2F0;
    --color-medium-gray: #A3A3A3;
    --color-dark-gray: #2D2D2D;
    --color-black: #1A1A1A;

    /* ---- Semantic (reference tokens) ---- */
    --color-text-primary: var(--color-black);
    --color-text-secondary: var(--color-dark-gray);
    --color-text-muted: var(--color-medium-gray);
    --color-text-inverse: var(--color-white);
    --color-accent: var(--color-orange);
    --color-accent-hover: var(--color-dark-orange);
    --color-surface: var(--color-white);
    --color-surface-alt: var(--color-light-gray);
    --color-surface-elevated: var(--color-off-white);

    /* ---- Borders & Shadows ---- */
    --color-border: #E5E5E3;
    --color-border-light: #F0F0EE;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10);

    /* ---- Transitions ---- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ---- Border Radius ---- */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 50%;
}


/* ============================================= */
/* ============ COLOR UTILITY CLASSES ========== */
/* ============================================= */

/* ---- Text Colors ---- */
.color-white { color: var(--color-white); }
.color-off-white { color: var(--color-off-white); }
.color-light-gray { color: var(--color-light-gray); }
.color-medium-gray { color: var(--color-medium-gray); }
.color-dark-gray { color: var(--color-dark-gray); }
.color-black { color: var(--color-black); }
.color-orange { color: var(--color-orange); }
.color-dark-orange { color: var(--color-dark-orange); }
.color-light-orange { color: var(--color-light-orange); }

/* ---- Background Colors ---- */
.background-white { background-color: var(--color-white); }
.background-off-white { background-color: var(--color-off-white); }
.background-light-gray { background-color: var(--color-light-gray); }
.background-medium-gray { background-color: var(--color-medium-gray); }
.background-dark-gray { background-color: var(--color-dark-gray); }
.background-black { background-color: var(--color-black); }
.background-orange { background-color: var(--color-orange); }
.background-dark-orange { background-color: var(--color-dark-orange); }
.background-light-orange { background-color: var(--color-light-orange); }

/* ---- Border Colors ---- */
.border-orange { border-color: var(--color-orange) !important; }
.border-light-gray { border-color: var(--color-border) !important; }