/* ==========================================================================
 *
 * This file overrides variables with the PayEx brand theme
 *
 */

/* OVERRIDES */

/* Grayscale */
@black: #000000;
@list-gray: #999999;
@light-gray: #f4f4f4;
@white: #ffffff;
@soft-brown: #707070;
@medium-brown: #72605e;

/* Main Brand Color Variants */
@brand-primary: #2a9d3f;
@brand-primary-light: @brand-primary;
@brand-primary-light-2: @brand-primary;
@brand-primary-light-3: @brand-primary;
@brand-primary-faded: fade(@brand-primary, 60%);

@brand-secondary: #3c3c3c;
@brand-secondary-light-1: @brand-secondary;
@brand-secondary-light-2: #c8c8c8;
@brand-secondary-light-3: @brand-secondary-light-2;
@brand-secondary-light-4: @brand-secondary;
@brand-secondary-info-1: @brand-secondary-light-3;
@brand-secondary-info-2: #efb7b6;

@brand-tertiary: @brand-primary;
@brand-accent: @brand-secondary;
@blue-bright: @brand-secondary-light-2;
@payex-light-blue: #32b2dd;
@payex-dark-blue: #1e3a6e;
@brand-complementary-3: #ef5434;

/* Background Colors */
@brand-bg-1: #e8f3e6;
@brand-bg-2: #e8f3e6;
@brand-bg-3: #fbedf4;
@brand-bg-4: #eaf8fc;
@brand-bg-gray: @brand-secondary-light-2;
@brand-bg-white: #ffffff;
@bg-quaternary: @list-gray;

/* State colors */
@brand-success: #238635;
@brand-success-light: #e8f3e6;
@brand-success-light-2: @brand-success;
@brand-warning: #f35b1c;
@brand-warning-light: #ffecd5;
@brand-warning-2: #f35b1c;
@brand-error-border: #f1bbb9;
@brand-error: #c5131c;
@brand-error-light: #ffebe3;
@brand-error-dark: #c5131c;
@brand-info: #3e6ab6;
@brand-info-light: #e8eff9;

/* Checkbox */
@checkbox-checked-color: @brand-secondary;

/* Button colors */
@primary-disabled-bg: #f5b895;
@secondary-disabled-bg: @brand-secondary-light-2;
@destructive-disabled-bg: #f9ded3;

@btn-primary-color: @white;
@btn-primary-bg: @brand-success;
@btn-primary-hover: @brand-tertiary;
@btn-primary-disabled-color: @white;
@btn-primary-disabled-bg: @brand-secondary-light-2;

@btn-secondary-color: @white;
@btn-secondary-bg: @brand-secondary;
@btn-secondary-hover: @soft-brown;
@btn-secondary-disabled-color: @white;
@btn-secondary-disabled-bg: @brand-secondary-light-2;

@btn-destructive-color: @white;
@btn-destructive-bg: @brand-error;
@btn-destructive-hover: #ee4e56;
@btn-destructive-disabled-color: @white;
@btn-destructive-disabled-bg: @destructive-disabled-bg;

@btn-link-color: @brand-secondary;
@btn-link-disabled-color: @list-gray;
@link-hover-color: @brand-primary;
@link-color: @btn-primary-bg;

/* Input */
@input-color: @brand-secondary;
@input-bg: @white;
@input-bg-disabled: @white;
@input-checked-bg-disabled: @brand-secondary-light-3;
@input-addon-color: @brand-secondary;

/* Panel */
@panel-default-border-color: @brand-secondary-light-3;

/* Other colors */
@yellow-faded: #fbdd91;
@green-syntax-highlight: #99cc66;
@yellow-syntax-highlight: #fff3d5;
@dark-brown: @brand-secondary;
@light-brown: @brand-secondary-light-3;
@help-block-text: #707070;
@tab-link: @help-block-text;
@radiobutton-border: @help-block-text;

/* Unused Bagde variables */
@brand-primary-lighter: @brand-primary-light;
@system-error: @brand-error;
@system-info: @brand-info;
@brand-apricot: @yellow-faded;
@brand-blue: @payex-dark-blue;
@brand-blue-light: @payex-light-blue;
@brand-brown: @brand-secondary;
@brown-medium: @brand-secondary-light-3;
@brown-soft: @brand-secondary-light-2;
@brown-light: @brand-secondary-light-3;
@solid-brown: @brand-secondary-light-2;
@brand-green: @brand-primary;
@brand-green-light: @brand-success-light;
@brand-orange: @brand-warning;
@brand-turquoise: @brand-bg-4;
@brand-turqouise-dark: @brand-bg-4;
@brand-turqouise-darker: @brand-bg-4;
@brand-turquoise-light: @brand-bg-4;
@brand-turqouise-lighter: @brand-bg-4;
@brand-pink: @brand-error-light;

html,
body {
	font-family: var(--brand-default);

	p {
		&.lead {
			font-family: var(--brand-default);
			font-weight: var(--font-weight-bold);
		}
	}
}

/* ==================================CSS VARIABLES========================================
*
* NEW CSS VARIABLES - work in progress
*
*/
:root {
	/* Grayscale */
	--black: #000000;
	--light-black: #2F2424;
	--list-gray: #999999;
	--light-gray: #f4f4f4;
	--gray: #c8c8c8;
	--white: #ffffff;
	--soft-brown: #707070;
	--medium-brown: #72605e;
	--brown-medium: #72605e;

	/* Main Brand Color Variants */
	--brand-primary: #2a9d3f;
	--brand-primary-light: var(--brand-primary, #2a9d3f);
	--brand-primary-light-2: var(--brand-primary, #2a9d3f);
	--brand-primary-light-3: var(--brand-primary, #2a9d3f);

	/* below, faded LESS function, not possible in CSS yet, keep LESS equivalent until possible conversion */

	/* TODO: to be converted: --brand-primary-faded:  fade(var(--brand-primary, #2A9D3F), 60%); */

	--brand-secondary: #3c3c3c;
	--brand-secondary-hover: var(--soft-brown, #707070);
	--brand-secondary-light-1: var(--brand-secondary, #3c3c3c);
	--brand-secondary-light-2: #c8c8c8;
	--brand-secondary-light-3: var(--brand-secondary-light-2, #c8c8c8);
	--brand-secondary-light-4: var(--brand-secondary, #3c3c3c);
	--brand-secondary-info-1: var(--brand-secondary-light-3, #c8c8c8);
	--brand-secondary-info-2: #efb7b6;
	--brand-tertiary: var(--brand-primary, #2a9d3f);
	--brand-accent: var(--brand-secondary, #3c3c3c);
	--blue-bright: var(--brand-secondary-light-2, #c8c8c8);
	--brand-accent-links: var(--brand-primary, #2a9d3f);
	--payex-light-blue: #32b2dd;
	--payex-dark-blue: #1e3a6e;

	/* Background Colors */
	--bg-primary: #e8f3e6;
	--brand-bg-1: var(--bg-primary);
	--brand-bg-2: #e8f3e6;
	--brand-bg-3: #fbedf4;
	--brand-bg-4: #eaf8fc;
	--brand-bg-gray: var(--brand-secondary-light-2, #c8c8c8);
	--bg-grey: var(--brand-secondary-light-2, #c8c8c8);
	--bg-white: #ffffff;
	--bg-quaternary: var(--list-gray, #999999);

	/* State colors */

	--system-success: #238635;
	--brand-success: var(--system-success);
	--system-success-light: #e8f3e6;
	--brand-success-light: var(--system-success-light);
	--system-success-light-2: var(--system-success, #238635);
	--brand-success-light-2: var(--system-success-light-2);
	--system-warning: #f35b1c;
	--brand-warning: var(--system-warning);
	--system-warning-light: #ffecd5;
	--brand-warning-light: var(--system-warning-light);
	--system-warning-2: #f35b1c;
	--brand-warning-2: var(--system-warning-2);
	--system-error-border: #f1bbb9;
	--brand-error-border: var(--system-error-border);
	--system-error: #c5131c;
	--brand-error: var(--system-error);
	--system-error-light: #ffebe3;
	--brand-error-light: var(--system-error-light);
	--system-info: #3e6ab6;
	--brand-info: var(--system-info);
	--system-info-light: #e8eff9;
	--brand-info-light: var(--system-info-light);

	// text colors
	--text-color: var(--brand-secondary);
	--text-muted: color-mix(in srgb, var(--text-color), var(--white) 75%);
	--text-link: #1c7d2e;
	--text-hover: var(--brand-primary);
	--text-disabled: var(--brand-secondary-light-2);
	--text-gray: var(--brand-secondary, #3c3c3c);

	/* Checkbox */
	--checkbox-checked-color: var(--brand-secondary, #3c3c3c);

	/* BUTTONS COLORS */
	--btn-hover: var(--brand-tertiary, #2a9d3f);
	--primary-disabled-bg: #f5b895;
	--secondary-disabled-bg: var(--brand-secondary-light-2);
	--btn-primary-color: var(--brand-success, #238635);
	--btn-primary-text-color: var(--white, #ffffff);
	--btn-primary-bg: var(--brand-success, #238635);
	--btn-primary-disabled-color: var(--white, #ffffff);
	--btn-primary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8);

	/* btn-secondary */
	--btn-secondary-color: transparent;
	--btn-secondary-bg: var(--brand-secondary, #3c3c3c);
	--btn-secondary-text-color: var(--brand-secondary, #3c3c3c);
	--btn-secondary-border-color: var(--brand-secondary, #3c3c3c);
	--btn-secondary-disabled-color: var(--white, #ffffff);
	--btn-secondary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8);

	/* btn-tertiary */
	--btn-tertiary-color: var(--brand-secondary, #3c3c3c);
	--btn-tertiary-text-color: var(--white, #ffffff);
	--btn-tertiary-disabled: var(--btn-bg-disabled, rgb(212 196 188 / 30%));

	/* btn-destructive */
	--destructive-disabled-bg: #f9ded3;
	--btn-destructive-color: var(--white, #ffffff);
	--btn-destructive-bg: var(--brand-error, #c5131c);
	--btn-destructive-hover: #ee4e56;
	--btn-destructive-disabled-color: var(--white, #ffffff);
	--btn-destructive-disabled-bg: var(--destructive-disabled-bg, #f9ded3);
	--btn-link-color: var(--brand-secondary, #3c3c3c);
	--btn-link-disabled-color: var(--list-gray, #999999);
	--link-hover-color: var(--brand-primary, #2a9d3f);
	--link-color: var(--btn-primary-bg, #238635);

	/* Shared button variables */
	--btn-disabled-text: var(--text-disabled);
	--btn-bg-disabled: color-mix(
		in oklch,
		var(--text-disabled),
		var(--white) 70%
	);
	--btn-active-color: var(--brand-secondary, #3c3c3c);

	/* INPUTS COLORS */
	--input-color: var(--brand-secondary, #3c3c3c);
	--input-bg: var(--white, #ffffff);
	--input-bg-disabled: var(--white, #ffffff);
	--input-checked-bg-disabled: var(--brand-secondary-light-3, #c8c8c8);
	--input-addon-color: var(--brand-secondary, #3c3c3c);
	--input-border-color: var(--brand-secondary-hover, #5f5f5f);
	--input-border-focus-color: var(--brand-secondary, #3c3c3c);
	--input-border-success-color: var(--brand-success);
	--input-border-disabled-color: var(--brand-secondary-light-3, #c8c8c8);

	/* Panel */
	--panel-default-border-color: var(--brand-secondary-light-3, #c8c8c8);

	/* Other colors */
	--yellow-faded: #fbdd91;
	--green-syntax-highlight: #99cc66;
	--blue-syntax-highlight: #43d0dd;
	--yellow-syntax-highlight: #fff3d5;
	--dark-brown: var(--brand-secondary, #3c3c3c);
	--brown-light: var(--brand-secondary-light-3, #c8c8c8);
	--light-brown: var(--brown-light);
	--help-block-text: #707070;
	--tab-link: var(--help-block-text, #707070);
	--radiobutton-border: var(--help-block-text, #707070);
	// copied from SwedbankPay brand colors - please PayEx people check it out and adapt where necessary
	--brand-green: #497125;
	--brand-green-light: #70b63a;

	/* UNIVERSAL UTILITIES */
	--border-radius: 8px;

	/* TYPOGRAPHY */

	/* Brand fonts */
	--brand-black: "Futura PT W08 Medium", sans-serif;
	--brand-default: "Futura PT W08 Book", sans-serif;
	--brand-default-buttons: "Futura PT W08 Demi", sans-serif;
	--brand-monofont: monospace;
	--brand-headline: "Futura PT W08 Demi", sans-serif;
	--brand-font-default: "Futura PT W08 Book", sans-serif;

	// icon fonts
	--icons-font-material: "Material Icons";
	--icons-font-material-outlined: "Material Icons Outlined";
	--icons-font-material-default: var(--icons-font-material-outlined);
	--icons-font-atlas: initial;
	--icons-font-default: var(--icons-font-atlas);

	/* Font weights */
	--font-weight-header: 400;
}