/**
 * 🎨 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));
    --client-brand-rgb: 123, 189, 232; /* 7BBDE8 */
    --client-brand-deep-rgb: 10, 65, 116; /* 0A4174 */
    --client-accent-rgb: 78, 142, 162; /* 4E8EA2 */
    --client-white-rgb: 255, 255, 255;
    --client-success-rgb: 52, 211, 153;
}

:root,
html:not(.dark),
html.light {
    --color-bg-main-rgb: 189, 216, 233; /* BDD8E9 */
    --color-bg-surface-rgb: 255, 255, 255; /* White */
    --color-bg-card-rgb: 255, 255, 255; /* White Card BG */
    --color-bg-card-hover-rgb: 123, 189, 232; /* 7BBDE8 */
    --color-border-rgb: 110, 162, 179; /* 6EA2B3 */
    --color-border-subtle-rgb: 123, 189, 232; /* 7BBDE8 */
    --color-text-main-rgb: 0, 29, 57; /* 001D39 */
    --color-text-muted-rgb: 10, 65, 116; /* 0A4174 */
    --color-text-subtle-rgb: 73, 118, 159; /* 49769F */
}

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));
}

/* ⚖️ UNIVERSAL SIZING SCALE — Single Source of Truth for Size / Space / Type / Radius
   (4px grid — mirrors Tailwind's default scale so tokens map 1:1 to utilities) */
:root {
    /* ── Spacing scale ─────────────────────────────────────────── */
    --space-1: 0.25rem;    /*  4px */
    --space-2: 0.5rem;     /*  8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Type scale (fluid display sizes) ──────────────────────── */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-display: clamp(1.875rem, 3.5vw + 0.75rem, 3rem);   /* h1 page titles */
    --text-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);           /* hero headline  */

    /* ── Radius scale ──────────────────────────────────────────── */
    --radius-sm: 0.375rem;    /* rounded       */
    --radius-md: 0.5rem;      /* rounded-md    */
    --radius-lg: 0.75rem;     /* rounded-lg    */
    --radius-xl: 1rem;        /* rounded-xl    */
    --radius-2xl: 1.25rem;    /* rounded-2xl   */
    --radius-3xl: 1.5rem;     /* rounded-3xl   */
    --radius-full: 9999px;    /* rounded-full  */

    /* ── Layout ────────────────────────────────────────────────── */
    --container-max: 80rem;          /* max-w-7xl          */
    --container-pad: 1rem;           /* px-4 (mobile)      */
    --container-pad-md: 1.5rem;      /* px-6 (tablet)      */
    --container-pad-lg: 2rem;        /* px-8 (desktop)     */
    --section-y: 2rem;               /* section top/bottom */
    --section-y-md: 3rem;
    --section-y-lg: 4rem;

    /* ── Control heights (buttons / inputs) ────────────────────── */
    --control-sm: 2.25rem;           /* h-9   */
    --control-md: 2.75rem;           /* h-11  */
    --control-lg: 3.25rem;           /* h-13  */
}