/**
 * Unified Design System for Sarnies Inventory Dashboard
 * Token-based CSS variables for consistent theming
 */

:root {
    /* ========================================================================
       COLOR TOKENS - Status-based palette
       ======================================================================== */

    /* Critical (Red) */
    --color-critical-bg: rgb(254, 242, 242);        /* red-50 */
    --color-critical-border: rgb(239, 68, 68);      /* red-500 */
    --color-critical-text: rgb(127, 29, 29);        /* red-900 */
    --color-critical-row: rgba(127, 29, 29, 0.1);   /* red-900/10 */
    --color-critical-hover: rgba(239, 68, 68, 0.2); /* red-500/20 */

    /* Alert (Orange) */
    --color-alert-bg: rgb(255, 247, 237);           /* orange-50 */
    --color-alert-border: rgb(249, 115, 22);        /* orange-500 */
    --color-alert-text: rgb(124, 45, 18);           /* orange-900 */
    --color-alert-row: rgba(124, 45, 18, 0.1);      /* orange-900/10 */
    --color-alert-hover: rgba(249, 115, 22, 0.2);   /* orange-500/20 */

    /* Watch (Yellow) */
    --color-watch-bg: rgb(254, 252, 232);           /* yellow-50 */
    --color-watch-border: rgb(234, 179, 8);         /* yellow-500 */
    --color-watch-text: rgb(113, 63, 18);           /* yellow-900 */
    --color-watch-row: rgba(113, 63, 18, 0.1);      /* yellow-900/10 */
    --color-watch-hover: rgba(234, 179, 8, 0.2);    /* yellow-500/20 */

    /* Stable (Green) */
    --color-stable-bg: rgb(240, 253, 244);          /* green-50 */
    --color-stable-border: rgb(34, 197, 94);        /* green-500 */
    --color-stable-text: rgb(20, 83, 45);           /* green-900 */
    --color-stable-row: rgba(20, 83, 45, 0.1);      /* green-900/10 */
    --color-stable-hover: rgba(34, 197, 94, 0.2);   /* green-500/20 */

    /* ========================================================================
       NEUTRAL COLORS
       ======================================================================== */
    --color-gray-50: rgb(249, 250, 251);
    --color-gray-100: rgb(243, 244, 246);
    --color-gray-200: rgb(229, 231, 235);
    --color-gray-300: rgb(209, 213, 219);
    --color-gray-400: rgb(156, 163, 175);
    --color-gray-500: rgb(107, 114, 128);
    --color-gray-600: rgb(75, 85, 99);
    --color-gray-700: rgb(55, 65, 81);
    --color-gray-800: rgb(31, 41, 55);
    --color-gray-900: rgb(17, 24, 39);

    /* ========================================================================
       ACCENT COLORS
       ======================================================================== */
    --color-blue-50: rgb(239, 246, 255);
    --color-blue-100: rgb(219, 234, 254);
    --color-blue-200: rgb(191, 219, 254);
    --color-blue-300: rgb(147, 197, 253);
    --color-blue-500: rgb(59, 130, 246);
    --color-blue-600: rgb(37, 99, 235);
    --color-blue-700: rgb(29, 78, 216);

    /* ========================================================================
       TYPOGRAPHY
       ======================================================================== */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================================================
       SPACING
       ======================================================================== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */

    /* ========================================================================
       BORDERS & RADIUS
       ======================================================================== */
    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.375rem;  /* 6px */
    --border-radius-lg: 0.5rem;    /* 8px */
    --border-radius-xl: 0.75rem;   /* 12px */

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* ========================================================================
       SHADOWS
       ======================================================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ========================================================================
       Z-INDEX LAYERS
       ======================================================================== */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-tooltip: 60;

    /* ========================================================================
       TRANSITIONS
       ======================================================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ========================================================================
       BREAKPOINTS (for reference in media queries)
       ======================================================================== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1536px;
}

/* ============================================================================
   DARK MODE TOKENS (DISABLED - Causing text visibility issues)
   ============================================================================ */
/* Commented out until dashboard is fully dark-mode ready
@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-50: rgb(17, 24, 39);
        --color-gray-100: rgb(31, 41, 55);
        --color-gray-900: rgb(249, 250, 251);
    }
}
*/

/* Force light mode colors regardless of system preference */
@media (prefers-color-scheme: dark) {
    :root {
        /* Keep light mode colors even in dark mode */
        --color-gray-50: rgb(249, 250, 251);
        --color-gray-100: rgb(243, 244, 246);
        --color-gray-200: rgb(229, 231, 235);
        --color-gray-300: rgb(209, 213, 219);
        --color-gray-400: rgb(156, 163, 175);
        --color-gray-500: rgb(107, 114, 128);
        --color-gray-600: rgb(75, 85, 99);
        --color-gray-700: rgb(55, 65, 81);
        --color-gray-800: rgb(31, 41, 55);
        --color-gray-900: rgb(17, 24, 39);
    }

    /* Force text to always be dark in main content only */
    .main-content,
    .main-content * {
        color: rgb(17, 24, 39) !important;
    }

    /* Restore sidebar text colors */
    .sidebar-container,
    .sidebar-container *,
    .nav-item,
    .nav-item *,
    .sidebar-brand,
    .sidebar-brand *,
    .sidebar-footer,
    .sidebar-footer *,
    .sidebar-toggle,
    .sidebar-toggle * {
        color: var(--sidebar-text) !important;
    }

    /* Sidebar headings should be white */
    .sidebar-brand h1 {
        color: white !important;
    }

    /* Active/hover states should be white */
    .nav-item:hover,
    .nav-item:hover *,
    .nav-item.active,
    .nav-item.active * {
        color: white !important;
    }
}

/* ============================================================================
   BASE RESET & TYPOGRAPHY
   ============================================================================ */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    margin: 0;
    padding: 0;
}

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

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font weights */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Text sizes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* Transitions */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Number formatting */
.numeric {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}