/* ========== COLOUR SCHEME VARIABLES ========== */
/* Global CSS variables for consistent theming across system and modules */

:root {
    /* ===== BASE SYSTEM COLOURS ===== */
    /* Core application framework colours */
    --color-primary: #2c3d4f;           /* Main header, navigation */
    --color-secondary: #3d5266;         /* Module navigation bar */
    --color-accent: #4a90e2;            /* Links, CTAs, highlights */
    --color-accent-hover: #357ab8;      /* Interactive states */
    
    /* Semantic colours */
    --color-success: #27ae60;           /* Positive actions, confirmations */
    --color-success-hover: #279c58;
    --color-success-bg: #d4edda;        /* Success background */
    --color-warning: #f39c12;           /* Warnings, cautions */
    --color-danger: #e74c3c;            /* Errors, destructive actions */
    --color-danger-hover: #cb3c2e;
    --color-danger-bg: #f8d7da;         /* Danger background */
    --color-info: #3498db;              /* Informational messages */
    --color-neutral: #56687b;           /* Neutral CTAs, messages */
    --color-neutral-hover: #3d5266;
    --color-export: #367199;            /* Export CTAs */
    --color-export-hover: #4482ab;
    
    /* Neutral palette */
    --color-text-primary: #2c3e50;      /* Main body text */
    --color-text-secondary: #5b6263;    /* Secondary text, labels */
    --color-text-light: #7f8c8d;        /* Placeholder, disabled text */
    --color-background: #cdd5db;        /* Page background */
    --color-surface: #ffffff;           /* Cards, panels, modals */
    --color-border: #9aa1a8;            /* Default borders */
    --color-border-light: #dfe4e8;      /* Subtle dividers */
    --color-border-thick: #2c3d4f;      /* Thick dividers */

    --color-mem-background: #f3ede7;    /* Page background within members module */
    --color-bkr-background: #bed8e2;    /* Page background within BKR module */
    
    /* Interactive states */
    --color-hover: #f0f0f0;             /* Hover background overlay */
    --color-active: rgba(0, 0, 0, 0.1); /* Active/pressed state */
    --color-disabled: #eeeeee;          /* Disabled elements */
    
    /* ===== MODULE ACCENT COLOURS ===== */
    /* Subtle accents for module differentiation */
    --module-dvt-accent: #4a90e2;       /* Device Tracker - Blue */
    --module-bkr-accent: #27ae60;       /* Book Rental - Green */
    --module-lib-accent: #e67e22;       /* Library - Orange */
    --module-devtools-accent: #9b59b6;  /* Developer Tools - Purple */
    --module-dashboard-accent: #34495e; /* Dashboard - Slate */
    --module-account-accent: #16a085;   /* Account - Teal */
    --module-members-accent: #e74c3c;   /* Members - Red */
    --module-staff-accent: #f39c12;     /* Staff - Amber */
    
    /* ===== SHADOWS & EFFECTS ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.3);
    
    /* ===== SPACING SCALE ===== */
    --spacing-xs: 0.25em;   /* 4px */
    --spacing-sm: 0.5em;    /* 8px */
    --spacing-md: 1em;      /* 16px */
    --spacing-lg: 1.5em;    /* 24px */
    --spacing-xl: 2em;      /* 32px */
    --spacing-2xl: 3em;     /* 48px */
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* ===== Z-INDEX LAYERS ===== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-overlay: 1001;
    --z-modal: 1002;
    --z-tooltip: 1003;
}

/* ========== MODULE-SPECIFIC OVERRIDES ========== */
/* Apply module accent colours to navigation when body has module class */

body[data-module="dvt"] .module-nav-tab.active {
    border-bottom-color: var(--module-dvt-accent);
}
body[data-module="bkr"] .module-nav-tab.active {
    border-bottom-color: var(--module-bkr-accent);
}
body[data-module="lib"] .module-nav-tab.active {
    border-bottom-color: var(--module-lib-accent);
}
body[data-module="devtools"] .module-nav-tab.active {
    border-bottom-color: var(--module-devtools-accent);
}
body[data-module="dashboard"] .module-nav-tab.active {
    border-bottom-color: var(--module-dashboard-accent);
}
body[data-module="account"] .module-nav-tab.active {
    border-bottom-color: var(--module-account-accent);
}
body[data-module="members"] .module-nav-tab.active {
    border-bottom-color: var(--module-members-accent);
}
body[data-module="staff"] .module-nav-tab.active {
    border-bottom-color: var(--module-staff-accent);
}