/* Fonts - Poppins */

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

:root {
    /* ========================================
       LIGHT MODE ONLY - Complete Palette
       ======================================== */

    /* Login Page Colours */
    --colour-login-primary: #5B3F7D;
    --colour-login-primary-dark: #4a2f6a;
    --colour-login-accent: #F4B860;
    --colour-login-gradient-start: #E8E3DB;
    --colour-login-gradient-end: #D0C8BC;
    --colour-login-divider: #D8D0C4;

    /* Primary Palette */
    --colour-primary: #6844c7;
    --colour-primary-dark: #5639a8;
    --colour-primary-light: #8b6dd4;

    --colour-accent: #ffe066;
    --colour-accent-dark: #ffd633;

    /* Background & Surfaces */
    --colour-background: #f8f9fa;
    --colour-surface: #ffffff;
    --colour-surface-alt: #f4f6f9;

    /* Text Colours */
    --colour-text: #2c3e50;
    --colour-text-light: #555555;
    --colour-text-lighter: #777777;

    /* Form Elements */
    --colour-input: #f8f9fa;
    --colour-border: #e0e6ed;
    --colour-input-border: #e0e6ed;
    --colour-input-bg-focus: #ecf4ff;
    --colour-input-border-focus: #d0d9e8;
    --colour-input-placeholder: #aaaaaa;
    --colour-label-text: #444444;

    /* Status Colours */
    --colour-success: #27ae60;
    --colour-warning: #f39c12;
    --colour-error: #e74c3c;
    --colour-info: #3498db;

    /* Error/Alert Colours */
    --colour-error-bg: #fdecea;
    --colour-error-border: #f5c6cb;
    --colour-error-text: #b71c1c;

    /* Badge Colours */
    --colour-badge-draft: #fef3c7;
    --colour-badge-complete: #d1fae5;
    --colour-badge-locked: #fee2e2;

    /* Grey Scale */
    --colour-grey-50: #f9f9f9;
    --colour-grey-100: #f5f5f5;
    --colour-grey-200: #eeeeee;
    --colour-grey-300: #e0e0e0;
    --colour-grey-400: #b0b0b0;
    --colour-grey-500: #999999;
    --colour-grey-600: #666666;
    --colour-grey-700: #555555;
    --colour-grey-800: #444444;
    --colour-grey-900: #222222;

    /* Additional Specific Colours */
    --colour-dark: #1a1a2e;
    --colour-white: #ffffff;
    --colour-black: #000000;

    --colour-sidebar-bg-1: #2d2d5e;
    --colour-sidebar-bg-2: #4a3880;
    --colour-sidebar-bg-3: #6844c7;
    --colour-sidebar-link: rgba(255, 255, 255, 0.82);
    --colour-sidebar-email: rgba(255, 255, 255, 0.9);
    --colour-sidebar-role: rgba(244, 184, 96, 0.9);
    --colour-sidebar-link-hover: rgba(255, 255, 255, 0.15);
    --colour-sidebar-link-active: rgba(255, 255, 255, 0.2);
    --colour-sidebar-accent: #f4b860;
    --colour-sidebar-border: rgba(255, 255, 255, 0.18);
    --colour-sidebar-logout: rgba(255, 255, 255, 0.75);
    --colour-sidebar-logout-hover-bg: rgba(255, 255, 255, 0.12);
    --colour-sidebar-centre: rgba(255, 255, 255, 0.65);

    --colour-avatar-bg-1: #f4b860;
    --colour-avatar-bg-2: #e07b39;
    --colour-avatar-shadow-1: rgba(244, 184, 96, 0.3);
    --colour-avatar-shadow-2: rgba(244, 184, 96, 0.45);

    --colour-table-row-even: #f7f5fd;
    --colour-table-row-hover: #ede9f8;
    --colour-table-border: #eeedf7;
    --colour-patient-link: #6844c7;
    --colour-patient-link-dark: #4a2f9a;

    --colour-container-border: rgba(104, 68, 199, 0.07);
    --colour-input-border-primary: rgba(104, 68, 199, 0.3);
    --colour-search-border: rgba(104, 68, 199, 0.35);
    --colour-input-focus-bg: #fdfcff;
    --colour-form-info-bg: #f7f5fd;
    --colour-form-info-bg-alt: #eef4ff;

    --colour-btn-secondary-bg: #f0eef8;
    --colour-btn-secondary-hover-bg: #e0dbf5;

    --colour-success-bg: #e6f9ee;
    --colour-success-border: #a3d9b5;
    --colour-success-text: #1a6b3a;

    --colour-progress-track: #e9ecef;
    --colour-success-light: #52c48a;
    --colour-warning-light: #f7c06a;
    --colour-error-light: #f08080;
    --colour-warning-dark: #e67e22;
    --colour-error-hover: #c0392b;
    --colour-success-hover: #1e8449;
    --colour-info-dark: #2980b9;

    --colour-badge-draft-bg: #fff3cd;
    --colour-badge-draft-text: #856404;
    --colour-badge-draft-border: #ffc107;
    --colour-badge-complete-bg: #d1f2e3;
    --colour-badge-complete-text: #186a3b;
    --colour-badge-complete-border: #27ae60;
    --colour-badge-locked-bg: #e8d5f5;
    --colour-badge-locked-text: #5b2c8d;
    --colour-badge-locked-border: #8e44ad;
    --colour-badge-admin-bg: #d6eaf8;
    --colour-badge-admin-text: #154360;
    --colour-badge-admin-border: #2e86c1;
    --colour-badge-site-bg: #d5f5e3;
    --colour-badge-site-text: #1e8449;
    --colour-badge-site-border: #27ae60;
    --colour-badge-viewer-bg: #fdebd0;
    --colour-badge-viewer-text: #784212;
    --colour-badge-viewer-border: #e67e22;
    --colour-badge-info-bg: #d6eaf8;
    --colour-badge-info-text: #154360;
    --colour-badge-danger-bg: #fad7d7;
    --colour-badge-danger-text: #7b1212;
    --colour-badge-danger-border: #e74c3c;
    --colour-badge-active-bg: #ccfbf1;
    --colour-badge-active-text: #0f766e;
    --colour-badge-active-border: #99f6e4;

    --colour-status-draft-bg: rgba(52, 152, 219, 0.15);
    --colour-status-draft-text: #2980b9;
    --colour-status-complete-bg: rgba(39, 174, 96, 0.15);
    --colour-status-complete-text: #1e8449;
    --colour-status-locked-bg: rgba(243, 156, 18, 0.15);
    --colour-status-locked-text: #9a5a00;

    --colour-modal-overlay: rgba(0, 0, 0, 0.5);
    --colour-primary-hover-row: linear-gradient(90deg, rgba(104, 68, 199, 0.05), transparent);
    --colour-primary-hover-bg: rgba(104, 68, 199, 0.04);

    /* ========================================
       GRADIENTS
       ======================================== */

    --gradient-sidebar: linear-gradient(180deg, #2d2d5e 0%, #4a3880 50%, #6844c7 100%);
    --gradient-login-bg: linear-gradient(135deg, #fffef1 0%, #f8e4c3 100%);
    --gradient-button: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
    --gradient-button-hover: linear-gradient(135deg, #2d2d5e 0%, #4a3880 100%);
    --gradient-avatar: linear-gradient(135deg, #f4b860 0%, #e07b39 100%);
    --gradient-table-header: linear-gradient(90deg, #4a3880 0%, #6844c7 100%);
    --gradient-main-content: linear-gradient(135deg, #f5f3fa 0%, #eef2fb 100%);

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --font-family: 'Poppins', 'Segoe UI', sans-serif;
    --font-family-mono: 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 4rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.1;
    --line-height-normal: 1.3;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;

    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.03em;
    --letter-spacing-widest: 0.06em;
    --letter-spacing-uppercase: 0.04em;

    /* ========================================
       SPACING
       ======================================== */

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* ========================================
       BORDERS & RADIUS
       ======================================== */

    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-lg: 8px;
    --border-radius-full: 50%;

    --border-width: 1px;
    --border-width-thick: 2px;
    --border-width-thick-3: 3px;
    --border-width-thick-4: 4px;

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.15);
    --shadow-sidebar: 4px 0 16px rgba(0, 0, 0, 0.18);
    --shadow-avatar: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(244, 184, 96, 0.3);
    --shadow-avatar-hover: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(244, 184, 96, 0.45);
    --shadow-table: 0 4px 16px rgba(104, 68, 199, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-button: 0 3px 10px rgba(26, 26, 46, 0.3);
    --shadow-button-hover: 0 6px 18px rgba(26, 26, 46, 0.4);
    --shadow-focus-sm: 0 0 0 3px rgba(104, 68, 199, 0.15);
    --shadow-focus-lg: 0 0 0 4px rgba(104, 68, 199, 0.12);
    --shadow-inset-primary: inset 3px 0 0 #f4b860;
    --shadow-container: 0 2px 12px rgba(104, 68, 199, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-stat: 0 2px 10px rgba(104, 68, 199, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-stat-hover: 0 6px 20px rgba(104, 68, 199, 0.15);
    --shadow-reports: 0 2px 10px rgba(104, 68, 199, 0.08);
    --shadow-help: 0 2px 10px rgba(104, 68, 199, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-primary-sm: 0 2px 8px rgba(104, 68, 199, 0.35);
    --shadow-primary-xs: 0 4px 12px rgba(104, 68, 199, 0.25);
    --shadow-success-sm: 0 2px 8px rgba(39, 174, 96, 0.35);
    --shadow-danger-sm: 0 2px 8px rgba(231, 76, 60, 0.35);
    --shadow-login-focus: 0 0 0 3px rgba(91, 63, 125, 0.15);
    --shadow-button-active: 0 2px 6px rgba(26, 26, 46, 0.3);

    /* ========================================
       Z-INDEX
       ======================================== */

    --z-dropdown: 100;
    --z-modal: 1000;
    --z-tooltip: 1100;

    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 150ms ease-in-out;
    --transition: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ========================================
       COMPONENT SPECIFIC SIZES
       ======================================== */

    --sidebar-width: 260px;
    --sidebar-width-min: 220px;
    --avatar-size: 80px;
    --avatar-size-sm: 48px;
    --avatar-border-icon-size: 3px;
    --avatar-border-icon-size-hover: 4px;

    --button-padding-sm: 0.625rem 1.25rem;
    --button-padding-lg: 0.75rem 1.375rem;
    --button-padding-login: 0.875rem 1rem;

    --form-padding: 0.75rem 1rem;
    --form-padding-sm: 0.5rem 1rem;

    --table-padding: 0.9375rem 1.125rem;
    --table-padding-sm: 0.875rem 1rem;

    --container-padding: 2rem;
    --container-padding-sm: 1rem;
    --container-margin-bottom: 2rem;

    /* ========================================
       BUTTON ICON SIZES
       ======================================== */

    --icon-btn-size: 22px;
    --icon-sidebar-size: 1em;
    --icon-sidebar-size-lg: 1.1em;

    /* ========================================
       FORM INPUT SIZES
       ======================================== */

    --input-focus-outline: 3px;
    --input-focus-offset: 2px;
    --select-arrow-size: 1em;
    --select-arrow-padding: 2.5rem;

    /* ========================================
       PAGINATION & GRID
       ======================================== */

    --stats-grid-columns: repeat(auto-fill, minmax(180px, 1fr));
    --stats-grid-gap: 1.25rem;
}