/* =====================================================================
   ADMIN CSS VARIABLES
   Centralized theme variables for Admin CMS
   Based on demo-admin-dark.html and demo-admin-light.html
   ===================================================================== */

:root {
  /* ===== Dark Theme (Default) - Enhanced Contrast ===== */
  --bg-color: #0B1015;            /* Deep dark navy - darker base */
  --card-bg: #1A2332;             /* Brighter card background for contrast */
  --sidebar-bg: #060A0E;          /* Deepest sidebar background */
  --header-bg: #1A2332;           /* Header background matches cards */
  --primary: #E8B44D;             /* Brighter gold for better visibility */
  --accent-gold: #E8B44D;         /* Brighter gold accent */
  --border-color: #2D3748;        /* More visible border */
  --text-main: #F7FAFC;           /* Near-white for maximum contrast */
  --text-dim: #A0AEC0;            /* Lighter dim text */
  --success: #48BB78;             /* Brighter success green */
  --danger: #F56565;              /* Brighter danger red */
  --warning: #ED8936;             /* Brighter warning orange */
  --gold-gradient: linear-gradient(180deg, #E8B44D 0%, #1A2332 100%);
  
  /* ===== Text Colors ===== */
  --text-primary: #F7FAFC;        /* Near-white main text */
  --text-secondary: #CBD5E0;      /* Lighter secondary text */
  --text-muted: #A0AEC0;          /* Lighter muted gray */
  --text-light: #F7FAFC;          /* Light text */
  --text-white: #FFFFFF;          /* Pure white */
  --text-error: #FC8181;          /* Brighter error red */
  --text-success: #48BB78;        /* Brighter success text */
  --text-warning: #ED8936;        /* Brighter warning text */
  
  /* ===== Background Colors ===== */
  --bg-page: #0B1015;             /* Page background */
  --bg-dark: #060A0E;             /* Darker background */
  --bg-sidebar: #060A0E;          /* Sidebar bg */
  --bg-panel: #1A2332;            /* Panel bg with better contrast */
  --bg-hover: rgba(232, 180, 77, 0.08);   /* More visible hover state */
  --bg-active: rgba(232, 180, 77, 0.2);   /* Stronger active state */
  
  /* ===== Border Colors ===== */
  --border-light: rgba(232, 180, 77, 0.2);
  --border-focus: var(--primary);
  
  /* ===== Status Colors ===== */
  --status-online-bg: rgba(72, 187, 120, 0.15);
  --status-online-text: #68D391;
  --status-online-border: rgba(72, 187, 120, 0.3);
  
  --status-offline-bg: rgba(245, 101, 101, 0.15);
  --status-offline-text: #FC8181;
  --status-offline-border: rgba(245, 101, 101, 0.3);
  
  --status-pending-bg: rgba(237, 137, 54, 0.15);
  --status-pending-text: #F6AD55;
  --status-pending-border: rgba(237, 137, 54, 0.3);
  
  /* ===== Button Colors (Dark Theme) ===== */
  --btn-primary-bg: #E8B44D;
  --btn-primary-hover: #F0C169;
  --btn-primary-text: #0B1015;
  
  --btn-secondary-bg: #2D3748;
  --btn-secondary-hover: #4A5568;
  
  --btn-success-bg: #48BB78;
  --btn-success-hover: #68D391;
  
  --btn-danger-bg: #F56565;
  --btn-danger-hover: #FC8181;
  
  --btn-warning-bg: #ED8936;
  --btn-warning-hover: #F6AD55;
  
  --btn-gray-bg: #2D3748;
  --btn-gray-hover: #4A5568;
  
  /* Legacy compatibility */
  --brand: #E8B44D;
  --brand-dark: #B8892E;
  --brand-light: #F0C169;
  --velra-gold: #E8B44D;
  --velra-green: #48BB78;
  
  /* ===== Card Shadow ===== */
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);

  /* ===== Spacing ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  
  /* ===== Layout Dimensions ===== */
  --sidebar-width: 260px;
  --topbar-height: 64px;
  --content-padding: 32px;
  
  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-full: 999px;
  
  /* ===== Shadows (Dark Theme - Deeper for contrast) ===== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 4px 16px rgba(232, 180, 77, 0.3);  /* Brighter gold glow */
  --shadow-green: 0 4px 16px rgba(72, 187, 120, 0.25); /* Brighter green glow */
  
  /* ===== Typography ===== */
  --font-sans: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;
  
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;
  --font-size-4xl: 32px;
  --font-size-5xl: 36px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;
  
  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ===== Z-Index Scale ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-sidebar: 900;
  --z-header: 1000;
  
  /* ===== Form Elements ===== */
  --input-height: 40px;
  --input-height-lg: 48px;
  --input-padding-x: 12px;
  --input-padding-y: 10px;
  --input-border-width: 1px;
  
  /* ===== Focus Ring (Velra Gold) ===== */
  --focus-ring-color: rgba(232, 180, 77, 0.25);
  --focus-ring-width: 3px;
  --focus-border-color: var(--velra-gold);
}

/* ===== Light Theme Override - Enhanced Contrast, Less Harsh ===== */
.theme-light {
  /* Backgrounds - Softer whites, better contrast */
  --bg-color: #F5F7FA;             /* Soft blue-gray instead of pure white */
  --card-bg: #FFFFFF;              /* Pure white for cards (contrast) */
  --sidebar-bg: #FAFBFC;           /* Slightly off-white for sidebar */
  --header-bg: #FFFFFF;            /* White header with shadow */
  --bg-page: #F5F7FA;              /* Page background */
  --bg-panel: #FFFFFF;             /* Panel background */
  --bg-dark: #E8EDF2;              /* Darker accent background */
  
  /* Primary colors - More saturated for better contrast */
  --primary: #0D9488;              /* Teal - easier on eyes than bright green */
  --accent-gold: #CA8A04;          /* Deeper gold for better contrast */
  
  /* Borders - More visible */
  --border-color: #D1D5DB;         /* Darker borders for clarity */
  --border-light: rgba(13, 148, 136, 0.2);
  
  /* Text - Higher contrast */
  --text-main: #0F172A;            /* Near-black for maximum readability */
  --text-primary: #0F172A;         /* Primary text */
  --text-secondary: #475569;       /* Darker secondary text */
  --text-dim: #64748B;             /* More visible dim text */
  --text-muted: #94A3B8;           /* Lighter muted text */
  --text-light: #0F172A;           /* Light text */
  --text-white: #FFFFFF;           /* Pure white */
  
  /* Status colors - More saturated, easier to distinguish */
  --success: #059669;              /* Deeper green */
  --danger: #DC2626;               /* Deeper red */
  --warning: #D97706;              /* Deeper orange */
  
  /* Shadows - Stronger for better depth perception */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  /* Nav - Better visual feedback */
  --nav-active-bg: #E0F2F1;       /* Teal tint for active */
  --bg-hover: #F0F9FF;             /* Light blue hover */
  --bg-active: #E0F2F1;            /* Active state */
  
  /* Buttons - More saturated for visibility */
  --btn-primary-bg: #0D9488;       /* Teal primary */
  --btn-primary-hover: #0F766E;    /* Darker teal hover */
  --btn-primary-text: #FFFFFF;
  
  --btn-secondary-bg: #E8EDF2;     /* Soft gray */
  --btn-secondary-hover: #D1D9E2;  /* Darker on hover */
  
  --btn-success-bg: #059669;
  --btn-success-hover: #047857;
  
  --btn-danger-bg: #DC2626;
  --btn-danger-hover: #B91C1C;
  
  --btn-warning-bg: #D97706;
  --btn-warning-hover: #B45309;
  
  --btn-gray-bg: #E8EDF2;
  --btn-gray-hover: #D1D9E2;
  
  /* Status badges - Higher contrast backgrounds */
  --status-online-bg: #D1FAE5;     /* Stronger green bg */
  --status-online-text: #047857;   /* Darker green text */
  --status-online-border: #A7F3D0;
  
  --status-offline-bg: #FEE2E2;    /* Stronger red bg */
  --status-offline-text: #B91C1C;  /* Darker red text */
  --status-offline-border: #FECACA;
  
  --status-pending-bg: #FED7AA;    /* Stronger orange bg */
  --status-pending-text: #B45309;  /* Darker orange text */
  --status-pending-border: #FDBA74;
  
  /* Legacy compatibility */
  --brand: #0D9488;
  --brand-dark: #0F766E;
  --brand-light: #14B8A6;
  --velra-gold: #CA8A04;
  --velra-green: #059669;
  
  /* Focus ring */
  --focus-ring-color: rgba(13, 148, 136, 0.3);
  --focus-border-color: var(--primary);
}