/**
 * PMODVN Design Tokens - Unified Design System
 * Based on successful login page theme
 * Version: 2.0
 * Now with Dark/Light theme support
 */

/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
    /* === PRIMARY COLOR SYSTEM === */
    /* Based on successful login page (#f59e0b) */
    --primary-color: #f59e0b;
    --primary-light: #fbbf24;
    --primary-dark: #d97706;
    --primary-50: rgba(245, 158, 11, 0.05);
    --primary-100: rgba(245, 158, 11, 0.1);
    --primary-200: rgba(245, 158, 11, 0.2);
    --primary-300: rgba(245, 158, 11, 0.3);
    --primary-500: rgba(245, 158, 11, 0.5);

    /* === NEUTRAL COLORS === */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* === SEMANTIC COLORS === */
    --success-color: #10b981;
    --success-light: #34d399;
    --success-bg: #ecfdf5;
    --success-text: #065f46;
    --success-bg-light: rgba(16, 185, 129, 0.1);
    --success-border-light: rgba(16, 185, 129, 0.3);

    --error-color: #ef4444;
    --error-light: #f87171;
    --error-bg: #fef2f2;
    --error-text: #991b1b;

    /* Danger aliases for error */
    --danger-color: var(--error-color);
    --danger-light: var(--error-light);
    --danger-bg: var(--error-bg);
    --danger-text: var(--error-text);
    --danger-bg-light: rgba(239, 68, 68, 0.1);
    --danger-border-light: rgba(239, 68, 68, 0.2);
    --danger-dark: #b91c1c;
    --danger-border-light: rgba(239, 68, 68, 0.3);

    --warning-color: #f59e0b;
    --warning-light: #fbbf24;
    --warning-bg: #fffbeb;
    --warning-text: #92400e;
    --warning-dark: #d97706;
    --success-dark: #059669;
    --warning-bg-light: rgba(245, 158, 11, 0.1);
    --warning-border-light: rgba(245, 158, 11, 0.3);

    --info-color: #3b82f6;
    --info-light: #60a5fa;
    --info-bg: #eff6ff;
    --info-text: #1e40af;

    /* Overlay colors */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --info-bg-light: rgba(59, 130, 246, 0.1);
    --info-border-light: rgba(59, 130, 246, 0.3);

    /* === ACCENT SYSTEM === */
    --accent-primary: #f59e0b;
    --accent-secondary: #d97706;
    --accent-bg-light: rgba(245, 158, 11, 0.1);
    --accent-border-light: rgba(245, 158, 11, 0.3);

    /* === BACKGROUND SYSTEM (Dark Theme) === */
    --background-primary: #1a2332;
    --background-secondary: #1e2936;
    --background-tertiary: #374151;
    --background-overlay: rgba(0, 0, 0, 0.75);

    /* Login page gradient */
    --background-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* === TEXT COLORS (Dark Theme) === */
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-inverse: #111827;
    --text-muted: #9ca3af;

    /* === BORDER SYSTEM (Dark Theme) === */
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #1f2937;
    --border-focus: var(--primary-color);

    /* === SHADOW SYSTEM === */
    --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);
    --shadow-focus: 0 0 0 3px rgba(245, 158, 11, 0.1);

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

    /* === BORDER RADIUS === */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;

    /* === TYPOGRAPHY === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* === TRANSITIONS === */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* === Z-INDEX SYSTEM === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* === COMPONENT SPECIFIC === */
    /* Input System (Dark Theme) */
    --input-bg: #1e2936;
    --input-border: var(--border-color);
    --input-shadow: var(--shadow-sm);
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: var(--shadow-focus);

    /* Button System */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-hover: var(--primary-dark);
    --btn-primary-text: var(--white);

    /* Card System (Dark Theme) */
    --card-bg: #1e2936;
    --card-border: var(--border-color);
    --card-shadow: var(--shadow-md);
    --card-radius: var(--radius-lg);

    /* Sidebar System (Dark Theme) */
    --sidebar-bg: #1e2936;
    --sidebar-border: var(--border-color);
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;

    /* Header System (Dark Theme) */
    --header-bg: #1e2936;
    --header-border: var(--border-color);
    --header-height: 64px;

    /* Table System (Dark Theme) */
    --table-border: var(--border-color);
    --table-stripe: #1a2332;
    --table-hover: #374151;

    /* Additional aliases for dark theme */
    --bg-primary: #1a2332;
    --bg-secondary: #1e2936;
    --bg-tertiary: #374151;
    --border-primary: #374151;
    --border-secondary: #374151;
    --hover-bg: #374151;
    --surface-primary: #1e2936;
    --surface-secondary: #1a2332;
    --surface-tertiary: #374151;
}

/* === DARK MODE SUPPORT === */
/* Theme switching with data-theme attribute and system preference fallback */

/* System preference fallback (when no explicit theme is set) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --background-primary: #1a2332;
        --background-secondary: #1e2936;
        --background-tertiary: #374151;

        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --text-tertiary: #9ca3af;

        --border-color: #374151;
        --border-light: #4b5563;
        --border-dark: #6b7280;

        --card-bg: #1e2936;
        --sidebar-bg: #1e2936;
        --header-bg: #1e2936;
        --input-bg: #1e2936;
        --table-stripe: #374151;
        --table-hover: #4b5563;
    }
}

/* Light Theme Overrides */
[data-theme="light"] {
    /* === BACKGROUND SYSTEM (Light Theme) === */
    --background-primary: #ffffff;
    --background-secondary: #f9fafb;
    --background-tertiary: #f3f4f6;
    --background-overlay: rgba(0, 0, 0, 0.5);

    /* === TEXT COLORS (Light Theme) === */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;
    --text-muted: #6b7280;

    /* === BORDER SYSTEM (Light Theme) === */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;

    /* === COMPONENT SPECIFIC (Light Theme) === */
    --input-bg: #ffffff;
    --card-bg: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --border-primary: #e5e7eb;
    --border-secondary: #e5e7eb;
    --hover-bg: #f3f4f6;
    --surface-primary: #ffffff;
    --surface-secondary: #f9fafb;
    --surface-tertiary: #f3f4f6;
}

/* Theme transition animations */
*,
*::before,
*::after {
    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        color 300ms ease,
        box-shadow 300ms ease;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}