@charset "utf-8";

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('NeueHaasDisplayLight.ttf') format('truetype');
		font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('NeueHaasDisplayLight.ttf') format('truetype');
		font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SegoeUI';
    src: url('SegoeUI.ttf') format('truetype');
		font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('NeueHaasDisplayRoman.ttf') format('truetype');
		font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('NeueHaasDisplayMediu.ttf') format('truetype');
		font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'NeueHaasDisplay';
    src: url('NeueHaasDisplayBold.ttf') format('truetype');
		font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexMono';
    src: url('IBMPlexMono-Regular.ttf') format('truetype');
		font-weight: normal;
    font-style: normal;
}

:root {
    /* Existing Variables */
		--body-color: #19171A;
	  --nav-color: #19171A;
		--text-light: white;
		--logo-url: url('logo-white');
		--bg-sound-effect: url('sound-effect.png');

		--logo-height: 40px;
	
    --clr-logo: #6d777f;
    --clr-logo-text: #008ebf;
    --clr-text: #334545;
    --clr-effect: #ff9900;
    --clr-docs: rgb(89, 89, 89);

    --ff-docs: NeueHaasDisplay;
    --ff-online: NeueHaasDisplay, sans-serif;
    --fs-docs: 10pt;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-bold: 600;
		--fw-medium: 500;

    --status-danger-bg: hsl(342, 81%, 88%);
    --status-danger-text: hsl(351, 59%, 41%);
    --status-success-bg: hsl(117, 66%, 87%);
    --status-success-text: hsl(139, 56%, 38%);
    --status-warning-bg: hsl(45.6, 100%, 90.2%);
    --status-warning-text: hsl(44.7, 94.2%, 26.9%);
    
    --protection-success-bg: #EEFAF5;
    --protection-success-text: #007545;
    --protection-success-border: #00AA64;
    --protection-primary-bg: #E5F5FA;
    --protection-primary-text: #007497;
    --protection-primary-border: #009DCC;
    --protection-warning-bg: #FFF6F0;
    --protection-warning-text: #DB4F00;
    --protection-warning-border: #FF5C00;
    --protection-danger-bg: #C400000A;
    --protection-danger-text: #C40000;
    
    --btn-primary-hov: #e65300;
    --btn-info: #008ebf;
    --btn-info-hov: #047db2;
    --btn-success: #38a935;
    --btn-success-hov: #2e933d;
	
		--blue-primary-hov: #007497;
    --blue-focus: #1F7AFF;
		--blue-input: #3b82f6;
    --grey-border: #D9D9D9;
    --grey-desc: #334142;
	
		--blue-light-bg: #C4DEF5;
    --blue-text: #436DD1;
    --blue-outline: #2588DE;
		--blue-active-step: #0091c0;
    
    --grey-black: #19171A;
    --grey-white: #FFFFFF;
    --blue-primary: #009DCC;
    --orange-primary: #FF5C00;
    --btn-primary: var(--orange-primary);
    --gray-black: #000;
    --grey-bg: #EEF1F2;
    --green-g700: #007545;
    --brand-grey: #57707D;
    --font-main: "NeueHaasDisplay", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
		--font-segoe: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-roboto: "Roboto", sans-serif;
    
    --grey-g600: #737578;
		--grey-g500: #9ca3af;
    --grey-g400: #BBBCBE;
    --grey-g300: #E0E0E1;
    --grey-g200: #EDEDEE;
    --grey-g100: #F5F5F5;
		--grey-d5: #D5D5D5;
    --grey-e0: #E0E0E0;
    --grey-be: #BEBEBE;
    --text-muted: #6c757d;
		--grey-black-hover: #334142;
    
    --status-open: #57707D;
    --status-submitted: #009DCC;
    --status-draft: #19171A;
    --status-production: #009DCC;
    --status-ready: #00AA64;
    --status-shipped: #FF5C00;

    --fw-bolder: 700;
    --fw-black: 800;
    --bg-bluegray: #f2f1ed;
    --grey-dark: #1C1F1F;
    --grey-light: #C8C8C8;
    --bg-jumbotron: #f2f2f2;
    --overlay-bg: #00000099;
    --shadow-modal: rgba(0, 0, 0, 0.5);
    --btn-primary-active: rgba(219, 79, 0, 1);
		--clr-pink-45: #dc3545;
	
		--chat-fab-bg: #302E31;
	
	/* Color Picker Palette */
    --picker-gray: #6E6E6E;
    --picker-black: #0E0E0E;
    --picker-blue: #4397D8;
    --picker-purple: #9b6cff;
    --picker-cyan: #43CED8;
    --picker-pink: #ff5c8a;
    --picker-red: #DC3D30;
    --picker-orange: #ED732E;
    --picker-yellow: #F9FC52;
    --picker-lime: #E3FFCF;
		--picker-green: #2ECC71;
		--grey-white: #FFFFFF;
    
    /* Transparent Picker Adjustments */
    --picker-trans-white: rgba(255, 255, 255, 0.6);
    --picker-trans-gray: rgba(180, 180, 180, 0.5);
    --picker-trans-pink: rgba(255, 92, 138, 0.5);
    --picker-trans-green: rgba(168, 242, 138, 0.5);

    /* Picker Ring Shadows */
    --shadow-ring-sm: 0 0 0 3px rgba(0, 0, 0, 0.15);
    --shadow-ring-md: 0 0 0 3px rgba(0, 0, 0, 0.2);
    --shadow-ring-lg: 0 0 0 3px rgba(0, 0, 0, 0.25);
	
		/* Password Reset Form Inputs */
    --input-bg-blue: #e8f0fe;
    --input-border-blue: #cbdcfb;
    --text-dark-333: #333;

    /* Shadows & Overlays */
    --shadow-dark-15: 0 4px 12px rgba(0, 0, 0, 0.15);
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-15: rgba(255, 255, 255, 0.15);
		--outline-dark-alpha: #60343a40;
    --shadow-light-10: rgba(0, 0, 0, 0.10);
		--shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.15);
    --shadow-fab: 0 4px 12px rgba(0, 0, 0, 0.2);
	
		/* Dark Theme Specifics */
    --dark-input-bg: #2a262b;
    --white-alpha-04: rgba(255, 255, 255, 0.04);
    
    /* Default Form Colors */
    --text-form-default: #495057;
    --input-border-default: #ced4da;
	
		/* Search Specifics */
    --grey-icon: #9C9EA0;
    --text-dark-purple: #1B0434;
	
		/* Status Info Boxes */
    --blue-primary-alpha-05: rgba(0, 157, 204, 0.05);
    --orange-light-bg: #FFF9F5;
	
		/* Toast Notifications */
    --blue-toast-hover: #1982A1;
}

/* === SPECSAVERS BRAND THEME === */
[data-theme="specsavers"] {
    
		--body-color: #D3D3D3;
	  --nav-color: #D3D3D3;
		--text-light: #222222;
		--logo-url: url('logo-specsavers.svg');
		--bg-sound-effect: url('sound-effect-white.png');

		--logo-height: 20px;
	
    --grey-black: #222222;
    --gray-black: #222222;
    --clr-text: #222222;
    --status-draft: #222222;
    --grey-desc: #222222;
	
    --orange-primary: #3BAA35;
    --btn-primary: #3BAA35;
    --btn-primary-active: #2C8228;
    --status-shipped: #3BAA35;
    
    --protection-warning-border: #3BAA35;
    --protection-warning-text: #2C8228;
    --orange-light-bg: rgba(59, 170, 53, 0.05);

    --blue-primary: #63BAA9;
    --blue-primary-hov: #4C8F82;
		--btn-primary-hov: #4C8F82;
    --blue-focus: #63BAA9;
    --blue-input: #63BAA9;
    --blue-outline: #63BAA9;
    --status-submitted: #63BAA9;
    --status-production: #63BAA9;
    --blue-toast-hover: #4C8F82;
    
    --blue-text: #3BAA35;
    --blue-active-step: #3BAA35;
    --blue-light-bg: rgba(99, 186, 169, 0.15); 
    --blue-primary-alpha-05: rgba(99, 186, 169, 0.08); 
	
		--white-alpha-15: rgba(0, 0, 0, 0.1);
}

/* === PROACTIV BLUE BRAND THEME === */
[data-theme="proactiv"] {
    
		--body-color: #424547;
	  --nav-color: #424547;
		--text-light: white;
	  --logo-url: url('logo-proactiv.svg');
	
		--bg-sound-effect: url('sound-effect.png');

		--logo-height: 75px;
    --blue-primary: #2488C6; 
    --btn-primary: #2488C6;
    --btn-primary-active: #314184; 
    --blue-primary-hov: #314184;
		--btn-primary-hov: #314184;
    
    --status-submitted: #2488C6;
    --status-production:#2488C6;
    --blue-focus: #2488C6;
    --blue-input:#2488C6;
    --blue-outline: #2488C6;
    --blue-active-step: #2488C6;    

    --blue-light-bg: rgba(0, 122, 184, 0.08);
    --blue-toast-hover: #314184;
    --blue-text: #2488C6;    

    --grey-black: #424547;
    --gray-black: #000000;
    --clr-text: #424547;
    
    --orange-primary:#2488C6; 
    --protection-warning-border:#2488C6;
    --protection-warning-text: #2488C6;
    --orange-light-bg: rgba(0, 122, 184, 0.05);
}