/**
 * 🎨 DEDICATED DESIGN SYSTEM COLOR PALETTE & THEME TOKENS
 * Location: public/css/colors.css
 * Standard: Enterprise Clean Architecture (Single Source of Truth for Colors)
 */

:root {
    /* 1. BRAND & ACCENT COLOR PALETTE (RGB Values for Opacity Control) */
    --color-primary-rgb: 99, 102, 241;         /* Indigo (#6366f1) */
    --color-accent-rgb: 14, 165, 233;          /* Sky / Cyan (#0ea5e9) */
    --color-secondary-rgb: 147, 51, 234;       /* Purple (#9333ea) */

    /* 2. CATEGORY SPECIFIC THEME COLORS */
    --color-imei-rgb: 45, 212, 191;            /* Teal (#2dd4bf) */
    --color-server-rgb: 251, 113, 133;         /* Rose (#fb7185) */
    --color-remote-rgb: 34, 211, 238;          /* Cyan (#22d3ee) */
    --color-shop-rgb: 251, 191, 36;             /* Amber (#fbbf24) */

    /* 3. STATE & STATUS COLORS */
    --color-success-rgb: 52, 211, 153;         /* Emerald (#34d399) */
    --color-warning-rgb: 245, 158, 11;         /* Amber (#f59e0b) */
    --color-danger-rgb: 244, 63, 94;           /* Rose (#f43f5e) */
    --color-info-rgb: 56, 189, 248;            /* Sky (#38bdf8) */

    /* 4. DIRECT COLOR VARIABLES */
    --color-primary: rgb(var(--color-primary-rgb));
    --color-accent: rgb(var(--color-accent-rgb));
    --color-imei: rgb(var(--color-imei-rgb));
    --color-server: rgb(var(--color-server-rgb));
    --color-remote: rgb(var(--color-remote-rgb));
    --color-shop: rgb(var(--color-shop-rgb));
    
    --color-success: rgb(var(--color-success-rgb));
    --color-warning: rgb(var(--color-warning-rgb));
    --color-danger: rgb(var(--color-danger-rgb));
    --color-info: rgb(var(--color-info-rgb));

}

:root,
html:not(.dark),
html.light {
    --color-bg-main-rgb: 248, 250, 252;        /* Slate 50 */
    --color-bg-surface-rgb: 255, 255, 255;     /* White */
    --color-bg-card-rgb: 255, 255, 255;        /* White Card BG */
    --color-bg-card-hover-rgb: 248, 250, 252;
    --color-border-rgb: 226, 232, 240;          /* Slate 200 */
    --color-border-subtle-rgb: 241, 245, 249;
    --color-text-main-rgb: 15, 23, 42;         /* Slate 900 */
    --color-text-muted-rgb: 71, 85, 105;        /* Slate 600 */
    --color-text-subtle-rgb: 148, 163, 184;     /* Slate 400 */
}

html.dark {
    --color-bg-main-rgb: 8, 15, 30;
    --color-bg-surface-rgb: 15, 23, 42;
    --color-bg-card-rgb: 17, 27, 48;
    --color-bg-card-hover-rgb: 24, 36, 61;
    --color-border-rgb: 43, 57, 81;
    --color-border-subtle-rgb: 30, 41, 59;
    --color-text-main-rgb: 248, 250, 252;
    --color-text-muted-rgb: 148, 163, 184;
    --color-text-subtle-rgb: 100, 116, 139;
}

:root {
    --color-bg-main: rgb(var(--color-bg-main-rgb));
    --color-bg-surface: rgb(var(--color-bg-surface-rgb));
    --color-border: rgb(var(--color-border-rgb));
    --color-text-main: rgb(var(--color-text-main-rgb));
    --color-text-muted: rgb(var(--color-text-muted-rgb));
    --color-text-subtle: rgb(var(--color-text-subtle-rgb));
}