/* ==========================================================================
 *
 * This file contains SwedbankPay brand specific variables
 *
 */

/* Grayscale */
@black: #222222;
@list-gray: #999999;
@light-gray: #f9f8f6;
@white: #ffffff;

/* Brownscale */
@solid-brown: #2f2424;
@dark-brown: #493c3b;
@medium-brown: #72605e;
@soft-brown: #a38b80;
@light-brown: #d4c4bc;
@brown-solid: @solid-brown;
@brown-dark: @dark-brown;
@brown-medium: @medium-brown;
@brown-soft: @soft-brown;
@brown-light: @light-brown;

/* Main Brand Color Variants */
@brand-primary: #fdc92a;
@brand-primary-light: #fbdd91;
@brand-primary-lighter: @brand-primary-light-3;
@brand-primary-light-2: #ffdf88;
@brand-primary-light-3: #fff3d5;
@brand-primary-faded: fade(@brand-primary, 60%);
@brand-secondary: @solid-brown;
@brand-secondary-light-1: @medium-brown;
@brand-secondary-light-2: @soft-brown;
@brand-secondary-light-3: @light-brown;
@brand-secondary-light-4: #d4b8a3;
@brand-secondary-info-1: #8acdc3;
@brand-secondary-info-2: #efb7b6;

@brand-tertiary: #ee7023;
@brand-accent: #31a3ae;
@brand-accent-disabled: #98d0d6;

@brand-orange: @brand-tertiary;
@brand-blue: @brand-info;
@brand-blue-light: @brand-info-light;
@brand-turquoise: @brand-accent;
@brand-turquoise-light: @brand-secondary-info-1;
@brand-turqouise-lighter: #ebf8f2;
@brand-turqouise-dark: #257886;
@brand-turqouise-darker: #1a545e;
@brand-apricot: #fbf2ea;
@brand-pink: @brand-secondary-info-2;
@brand-brown: @brand-secondary;
@brand-green: @brand-success;
@brand-green-light: @brand-success-light;

/* Text colors */
@text-default: @brand-secondary;
@text-muted: @brown-medium;
@text-white: @brand-bg-white;

/* Background Colors */
@brand-bg-1: #fbf2ea;
@brand-bg-2: #ebf8f2;
@brand-bg-3: #fbedf4;
@brand-bg-4: #e9f7fb;
@brand-bg-gray: #ebe7e2;
@brand-bg-white: #ffffff;
@bg-white: @brand-bg-white;
@bg-primary: @brand-bg-1;
@bg-secondary: @brand-bg-2;
@bg-tertiary: @brand-bg-gray;
@bg-quaternary: @light-gray;

/* State colors */
@brand-success: #3c7213;
@brand-success-light: #f2f7eb;
@brand-success-light-2: #99cc66;
@brand-warning: #e97423;
@brand-warning-light: #fef2e2;
@brand-warning-2: @brand-tertiary;
@brand-error-border: #f1bbb9;
@brand-error: #d82e2a;
@brand-error-light: #ffe9e9;
@brand-error-dark: #8c0d14;
@brand-info: #3961a7;
@brand-info-light: #ebf1fa;

/* System colors */
@system-error-dark: @brand-error-dark;
@system-error: @brand-error;
@system-error-light: @brand-error-light;
@system-warning: @brand-warning;
@system-warning-light: @brand-warning-light;
@system-success: @brand-success;
@system-success-light: @brand-success-light;
@system-info: @brand-info;
@system-info-light: @brand-info-light;

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

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

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

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

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

@btn-link-color: @brand-secondary;
@btn-link-disabled-color: @brand-secondary-light-3;

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

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

/* Other colors */
@yellow-faded: #fbdd91;
@green-syntax-highlight: #99cc66;
@yellow-syntax-highlight: @brand-primary-light-3;

/* ==================================CSS VARIABLES========================================
*
* NEW CSS VARIABLES - work in progress
*
*/
:root {
	--brand-primary: var(--brand-yellow, #fdc92a);
	--brand-primary-light: #fbdd91;
	--brand-primary-lighter: var(--brand-yellow-lighter, #fff3d5);
	--brand-secondary: var(--brown-solid, #2f2424);

	// Functional colors
	--brown-solid: #2f2424;
	--dark-brown: #493c3b;
	--brown-medium: #72605e;
	--brown-soft: #a38b80;
	--brown-light: #d4c4bc;
	--gray: #ebe7e2;
	--white: #ffffff;

	/* Main Brand Color Variants */
	--brand-primary-light-3: #fff3d5;
	--brand-secondary-light-1: var(--brown-medium, #72605e);
	--brand-secondary-light-2: var(--brown-soft, #a38b80);
	--brand-secondary-light-3: var(--brown-light, #d4c4bc);

	// Grayscale
	--black: #222222;
	--light-gray: #f9f8f6;

	// Brown scale colors

	// Text colors
	--text-default: var(--brown-solid);
	--text-muted: var(--brown-medium);
	--text-muted-light: var(--brown-soft);
	--text-white: var(--white, #ffffff);
	--text-disabled: var(--brown-light, #d4c4bc);
	--brand-accent-links: var(--brand-turquoise-dark, #257886);
	--text-gray: #767676;

	// Communication colors
	--brand-yellow: #fdc92a;
	--brand-yellow-lighter: #fff3d5;
	--brand-orange: #ee7023;
	--brand-turquoise: #31a3ae;
	--brand-turquoise-light: #8acdc3;
	--brand-turquoise-dark: #257886;
	--brand-pink: #efb7b6;

	// Color pool
	--brand-turquoise-lighter: #ebf8f2;
	--brand-orange-lighter: #fbeadb;
	--brand-green: #497125;
	--brand-green-light: #70b63a;
	--brand-green-lighter: #e7f8d2;
	--brand-red-lighter: #ffe9e9;
	--brand-blue: #335bb1;
	--brand-blue-lighter: #e0eaf9;

	// Functional colors
	--base-1: var(--text-default);
	--base-2: var(--text-muted);
	--base-3: var(--text-muted-light);
	--base-4: var(--text-disabled);
	--base-5: var(--bg-brown);
	--base-6: var(--bg-grey);
	--base-7: var(--bg-white);

	// Background colors
	--bg-brown: var(--gray, #ebe7e2);
	--bg-grey: var(--light-gray, #f9f8f6);
	--bg-orange: #fff1e4;
	--bg-white: var(--white, #ffffff);
	--bg-turquoise: var(--brand-turquoise-lighter, #ebf8f2);

	// System colors
	--system-success: #4d9c0f;
	--system-success-light: var(--brand-green-lighter, #e7f8d2);
	--system-warning: var(--brand-orange, #ee7023);
	--system-warning-light: var(--brand-orange-lighter, #fbeadb);
	--system-info: var(--brand-blue, #335bb1);
	--system-info-light: var(--brand-blue-lighter, #e0eaf9);
	--system-error: #d82e2a;
	--system-error-light: var(--brand-red-lighter, #ffe9e9);
	// TODO: update system colors in LESS variables and in component

	--brand-error: var(--system-error);
	--brand-error-light: var(--system-error-light);

	// Button colors
	--secondary-disabled-bg: #e3d1c3;

	// Other colors
	--blue-syntax-highlight: #43d0dd;
	--bg-primary: #fbf2ea;

	// Universal utilities
	--border-radius: 8px;

	// BUTTON VALUES
	--btn-hover: var(--brown-medium);
	--btn-primary-color: var(--brown-solid);
	--btn-primary-text-color: var(--text-white);
	// btn-secondary
	--btn-secondary-color: transparent;
	--btn-secondary-text-color: var(--text-default);
	--btn-secondary-border-color: var(--brown-medium);
	// btn-tertiary
	--btn-tertiary-color: var(--gray);
	--btn-tertiary-text-color: var(--brown-solid);
	--btn-tertiary-disabled: var(--btn-bg-disabled);
	// 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-turquoise-light);

	//FORM VALUES
	--input-border-color: var(--brown-soft);
	--input-border-focus-color: var(--brown-solid);
	--input-border-success-color: var(--brand-turquoise);
	--input-checked-bg-disabled: var(--brand-secondary-light-3);
	--input-bg-disabled: var(--white);
	--input-color: var(--brand-secondary);

	/* Brand fonts */
	--brand-headline: "Swedbank Headline", "Arial", sans-serif;
	--brand-black: "Swedbank Headline Black", "Arial", sans-serif;
	--brand-monofont: "Akkurat Mono", monospace;
	--brand-default: "Arial", sans-serif;

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

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