/* ============================================= */
/* ============ CONTROL SENSE COLORS =========== */
/* ============================================= */
/* Project: Control Sense                        */
/* Updated: 2026-08-29                            */
/*                                                */
/* Forked from the SolarSense stylesheet: same    */
/* structure, same neutrals, red where that site  */
/* used orange. The reds come from the client's   */
/* Adobe Color theme plus the brand red #F5210E   */
/* they picked afterwards; two values are derived */
/* from it, see below.                            */
/* ============================================= */

:root {
    /* ---- Primary ----
       --color-red is the brand red and the default accent: fills, icons,
       borders, large type, and every accent that sits on a dark surface.

       --color-red-ink exists because the brand red only reaches 4.1:1 on
       white and 3.3:1 on the pale tint, both under the 4.5:1 floor for text
       below 24px. Small accent TEXT on a light background uses it instead,
       and it is also the hover step for red fills. Anything that is not text
       — an icon, a dot, a rule — stays on the brand red, which clears the
       3:1 those need.

       --color-light-red is derived: the brand red mixed 15% into white, the
       same tint ratio the SolarSense palette used for its pale accent.
       --color-bright-red is from the client's theme but has no role now that
       the brand red is lighter than it; kept so the palette stays complete. */
    --color-red: #F5210E;
    --color-red-ink: #A60E00;
    --color-bright-red: #D61200;
    --color-dark-red: #700900;
    --color-deep-red: #590700;
    --color-light-red: #FEDEDB;

    /* ---- 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-red);
    --color-accent-hover: var(--color-red-ink);
    --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-red { color: var(--color-red); }
.color-red-ink { color: var(--color-red-ink); }
.color-bright-red { color: var(--color-bright-red); }
.color-dark-red { color: var(--color-dark-red); }
.color-light-red { color: var(--color-light-red); }

/* ---- 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-red { background-color: var(--color-red); }
.background-red-ink { background-color: var(--color-red-ink); }
.background-bright-red { background-color: var(--color-bright-red); }
.background-dark-red { background-color: var(--color-dark-red); }
.background-deep-red { background-color: var(--color-deep-red); }
.background-light-red { background-color: var(--color-light-red); }

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