@use 'sass:list';
@use 'sass:map';

@use '@lucca-front/scss/src/commons/function';

$layers: 'reset, base, components, mods, product, utils';

$isNamespaced: false !default;
$deprecatedSpacings: false !default;
$deprecatedCardBoxMargin: false !default;
$deprecatedUtilityPrefix: false !default;

$prefersContrast: 'no-preference' !default;

$fontFamily: 'SourceSans' !default;
$fontFamilyBrand: 'LuccaSans' !default;
$fontWeights: (
	'regular': 400,
	'semibold': 600,
	'bold': 700,
	'black': 800,
) !default;
$fontStyles: ('normal') !default;

$fontWeightsBrand: (
	'regular': 400,
	'bold': 700,
	'black': 800,
) !default;
$fontStylesBrand: ('normal', 'italic') !default;

$fontFamilyCursive: false !default;
$fontWeightsCursive: (
	'regular': 400,
	'bold': 700,
) !default;
$fontStylesCursive: ('normal') !default;

$fontSizeVars: (
	'150': 0.75rem,
	'175': 0.875rem,
	'200': 1rem,
	'225': 1.125rem,
	'250': 1.25rem,
	'275': 1.375rem,
	'300': 1.5rem,
	'325': 1.625rem,
	'350': 1.75rem,
);

$lineHeight: (
	'200': 1rem,
	'250': 1.25rem,
	'300': 1.5rem,
	'350': 1.75rem,
	'400': 2rem,
);

$fontTokens: (
	heading-1-fontSize: var(--pr-t-font-fontSize-350),
	heading-1-lineHeight: var(--pr-t-font-lineHeight-400),
	heading-1-fontWeight: var(--pr-t-font-fontWeight-black),
	heading-2-fontSize: var(--pr-t-font-fontSize-275),
	heading-2-lineHeight: var(--pr-t-font-lineHeight-350),
	heading-2-fontWeight: var(--pr-t-font-fontWeight-bold),
	heading-3-fontSize: var(--pr-t-font-fontSize-225),
	heading-3-lineHeight: var(--pr-t-font-lineHeight-300),
	heading-3-fontWeight: var(--pr-t-font-fontWeight-bold),
	heading-4-fontSize: var(--pr-t-font-fontSize-200),
	heading-4-lineHeight: var(--pr-t-font-lineHeight-300),
	heading-4-fontWeight: var(--pr-t-font-fontWeight-semibold),
	highlight-XXL-fontSize: var(--pr-t-font-fontSize-350),
	highlight-XXL-lineHeight: var(--pr-t-font-lineHeight-400),
	highlight-XXL-fontWeight: var(--pr-t-font-fontWeight-black),
	highlight-XL-fontSize: var(--pr-t-font-fontSize-275),
	highlight-XL-lineHeight: var(--pr-t-font-lineHeight-300),
	highlight-XL-fontWeight: var(--pr-t-font-fontWeight-bold),
	highlight-L-fontSize: var(--pr-t-font-fontSize-225),
	highlight-L-lineHeight: var(--pr-t-font-lineHeight-300),
	highlight-L-fontWeight: var(--pr-t-font-fontWeight-bold),
	body-M-fontSize: var(--pr-t-font-fontSize-200),
	body-M-lineHeight: var(--pr-t-font-lineHeight-300),
	body-M-fontWeight: var(--pr-t-font-fontWeight-regular),
	body-S-fontSize: var(--pr-t-font-fontSize-175),
	body-S-lineHeight: var(--pr-t-font-lineHeight-250),
	body-S-fontWeight: var(--pr-t-font-fontWeight-regular),
	body-XS-fontSize: var(--pr-t-font-fontSize-150),
	body-XS-lineHeight: var(--pr-t-font-lineHeight-200),
	body-XS-fontWeight: var(--pr-t-font-fontWeight-regular),
);

$borderRadiusVars: (
	'0': 0px,
	'25': 2px,
	'50': 4px,
	'75': 6px,
	'100': 8px,
	'150': 12px,
	'200': 16px,
	'300': 24px,
	'400': 32px,
);

$borderRadiusTokens: (
	'structure': var(--pr-t-border-radius-150),
	'default': var(--pr-t-border-radius-100),
	'small': var(--pr-t-border-radius-75),
	'full': '9999px',
	'input': var(--pr-t-border-radius-default),
);

$product: 'brand' !default;
$palettesShades: text, 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900; // text is deprecated
$palettesStates: 'critical', 'error', 'warning', 'success', 'successContrasted', 'warningContrasted';
$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
$palettesProduct: 'product';
$palettesOtherProduct: () !default;
$palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier';

// pineapple, lime, grape, glacier
$palettesDeprecated: ('lucca', 'grey', 'primary', 'secondary') !default;

@if $palettesOtherProduct == 'all' {
	$palettesOtherProduct: ('pagga', 'poplee', 'coreHR', 'timmi', 'cleemy', 'cc');
}

$palettesAll: function.flatMap(
	$palettesStates,
	$palettesDefault,
	$palettesProduct,
	$palettesOtherProduct,
	$palettesDecorative,
	$palettesDecorativeMandatory,
	$palettesDeprecated
);

$palettesAssets: (
	'brand': ('brand': 'pineapple', 'secondary': 'lime'),
	'cc': ('brand': 'brand', 'secondary': 'lime'),
	'pagga': ('brand': 'brand', 'secondary': 'lime'),
	'poplee': ('brand': 'brand', 'secondary': 'pineapple'),
	'coreHR': ('brand': 'brand', 'secondary': 'pineapple'),
	'cleemy': ('brand': 'brand', 'secondary': 'grape'),
	'timmi': ('brand': 'brand', 'secondary': 'glacier')
);

$fieldsWidth: 20, 30, 40, 50, 60 !default;

// Palettes

$ai: (
	500: #bc6fdd,
	600: #a440cf,
);

$brand: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #fff1eb,
	100: #ffe0d1,
	200: #ffccb3,
	300: #ffbe9e,
	400: #ffaa80,
	500: #ff9361,
	600: #ff7b3d,
	700: #e06029,
	800: #ae2e03,
	900: #611405
);

$brandContrasted: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #fff1eb,
	100: #ffe0d1,
	200: #ffccb3,
	300: #ffbe9e,
	400: #ffaa80,
	500: #ff9361,
	600: #d76133,
	700: #ae2e04,
	800: #882105,
	900: #611405,
);

$cleemy: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #ecf9f7,
	100: #ceeee9,
	200: #a4e0da,
	300: #7acdc6,
	400: #54bbb2,
	500: #00a39c,
	600: #009491,
	700: #007a78,
	800: #00545c,
	900: #00333d
) !default;

$pagga: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #fbeffa,
	100: #f5dbf4,
	200: #ebc1e9,
	300: #e1a8df,
	400: #da8bd6,
	500: #d16bcc,
	600: #c94cc5,
	700: #b413ac,
	800: #86147e,
	900: #61005c
) !default;

$timmi: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #f0f1fe,
	100: #e0e1ff,
	200: #cac9fd,
	300: #b9b2fa,
	400: #a69df0,
	500: #9989ec,
	600: #866ce4,
	700: #6f52d1,
	800: #5027a5,
	900: #24075a
) !default;

$poplee: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #e6f6fe,
	100: #cbeafb,
	200: #b1def6,
	300: #98d2f1,
	400: #7bc3ea,
	500: #48abe0,
	600: #2b8fc5,
	700: #0b77b1,
	800: #005685,
	900: #003c5c
) !default;

$coreHR: (
	text: #ffffff,
	0: #ffffff,
	50: #e6f2fe,
	100: #cbe3fb,
	200: #b0d3f7,
	300: #96c4f3,
	400: #78b2ed,
	500: #5ea3e8,
	600: #3387db,
	700: #0c63bb,
	800: #004285,
	900: #002e5c
) !default;

$cc: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #feecf4,
	100: #fcd9e9,
	200: #f9b9d7,
	300: #f49fc7,
	400: #f084b7,
	500: #e864a1,
	600: #d63882,
	700: #bc2069,
	800: #930747,
	900: #580b2f
) !default;

$neutral: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	25: #f3f6fc,
	50: #e7edf9,
	100: #dbe3f5,
	200: #ced9ee,
	300: #becbe4,
	400: #acbbd7,
	500: #8396b9,
	600: #586a8d,
	700: #445473,
	800: #2a3551,
	900: #0b1732
);

$navigation: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	700: #313972,
	800: #192157,
	900: #12183f
);

// Colors: states

$success: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #dbfae0,
	100: #bef3c7,
	200: #a2ebaf,
	300: #84e695,
	400: #68d97b,
	500: #57c769,
	600: #39b155,
	700: #279b42,
	800: #0a762e,
	900: #004d20
);

$successContrasted: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #dbfae0,
	100: #bef3c7,
	200: #a2ebaf,
	300: #84e695,
	400: #68d97b,
	500: #57c769,
	600: #319f4c,
	700: #0a762f,
	800: #056228,
	900: #004d20
);

$warning: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #fff2db,
	100: #ffe9c2,
	200: #ffdb9e,
	300: #ffd080,
	400: #ffc35c,
	500: #ffb13d,
	600: #ff9d00,
	700: #f08800,
	800: #c25100,
	900: #802a00
);

$warningContrasted: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #fff2db,
	100: #ffe9c2,
	200: #ffdb9e,
	300: #ffd080,
	400: #ffc35c,
	500: #ffb13d,
	600: #d97e26,
	700: #b34b0f,
	800: #9a3b08,
	900: #802a00
);

$critical: (
	// text is deprecated
	text: #ffffff,
	0: #ffffff,
	50: #ffebec,
	100: #ffd2d4,
	200: #fdbebe,
	300: #faa3a3,
	400: #fa8989,
	500: #f76e6e,
	600: #f15050,
	700: #da2f2f,
	800: #aa0e0e,
	900: #630303
);

// Colors: Decoratives

$kiwi: (
	50: #ecf7de,
	100: #d7eeb9,
	200: #c7e79c,
	300: #aed57c,
	400: #96c856,
	500: #7cbb2a,
	600: #68a716,
	700: #4f840b,
	800: #3e6808,
	900: #2d4b06,
) !default;

$lime: (
	50: #e2f7df,
	100: #c5eebe,
	200: #a7e69e,
	300: #88d57c,
	400: #74cb67,
	500: #54ba45,
	600: #45a437,
	700: #1c7c0e,
	800: #16600b,
	900: #104508,
) !default;

$cucumber: (
	50: #ddf9eb,
	100: #c0f2d9,
	200: #98ecc2,
	300: #71daa6,
	400: #54c98f,
	500: #2db973,
	600: #12a55c,
	700: #008a45,
	800: #006b36,
	900: #005229,
) !default;

$mint: (
	50: #d9f7f1,
	100: #bbf2e7,
	200: #99ebda,
	300: #68d9c3,
	400: #31c4a6,
	500: #0fb392,
	600: #089b7e,
	700: #008a6e,
	800: #006b56,
	900: #004d3d,
) !default;

$glacier: (
	50: #e0f6f6,
	100: #c4eded,
	200: #a1e3e3,
	300: #73d3d3,
	400: #4dc7c7,
	500: #20b6b6,
	600: #08a0a0,
	700: #008a8a,
	800: #006b6b,
	900: #005252,
) !default;

$lagoon: (
	50: #dff3fb,
	100: #bfe7f8,
	200: #9fdaf4,
	300: #75c7ea,
	400: #49b5e4,
	500: #28a3d7,
	600: #148ec2,
	700: #086c96,
	800: #065374,
	900: #05425c,
) !default;

$blueberry: (
	50: #dfe8fb,
	100: #c8d8f9,
	200: #b1c8f6,
	300: #98b4eb,
	400: #769be5,
	500: #628cdf,
	600: #4777d7,
	700: #295cc2,
	800: #1b4498,
	900: #153575,
) !default;

$lavender: (
	50: #eadffb,
	100: #dfcdf9,
	200: #d3bbf7,
	300: #c3a8eb,
	400: #b493e6,
	500: #a17cda,
	600: #9165d2,
	700: #7647bd,
	800: #5f369b,
	900: #24075a,
) !default;

$grape: (
	50: #f5e3fc,
	100: #eed0fb,
	200: #e9c2f9,
	300: #d4a6e8,
	400: #ba84d2,
	500: #ad71c6,
	600: #9a57b7,
	700: #8133a3,
	800: #620f85,
	900: #470b60,
) !default;

$watermelon: (
	50: #f7dee4,
	100: #f1c1cd,
	200: #eaa4b5,
	300: #e48ba1,
	400: #db6683,
	500: #d4496c,
	600: #be2d51,
	700: #a7163a,
	800: #8d0729,
	900: #6f0620,
) !default;

$pumpkin: (
	50: #fdecd8,
	100: #fbddbc,
	200: #f9cf9f,
	300: #f4b771,
	400: #ef9c3e,
	500: #eb8e24,
	600: #db7500,
	700: #c26700,
	800: #8f4c00,
	900: #5c3100,
) !default;

$pineapple: (
	50: #fef7d7,
	100: #fbf1b6,
	200: #fae999,
	300: #f9e16c,
	400: #f8dc4f,
	500: #e7c623,
	600: #d6b300,
	700: #b89600,
	800: #8a7000,
	900: #665400,
) !default;

// https://sass-lang.com/documentation/variables/#advanced-variable-functions
$productsInterpolation: (
	'brand': $brand,
	'cleemy': $cleemy,
	'timmi': $timmi,
	'poplee': $poplee,
	'coreHR': $coreHR,
	'pagga': $pagga,
	'cc': $cc,
);

$palettesInterpolation: (
	'AI': $ai,
	'lucca': $brand,
	'brand': $brand,
	'brandContrasted': $brandContrasted,
	'grey': $neutral,
	'neutral': $neutral,
	'primary': map.get($productsInterpolation, $product),
	'secondary': map.get($productsInterpolation, $product),
	'product': map.get($productsInterpolation, $product),
	'navigation': $navigation,
	'success': $success,
	'successContrasted': $successContrasted,
	'error': $critical,
	'critical': $critical,
	'warning': $warning,
	'warningContrasted': $warningContrasted,
	'kiwi': $kiwi,
	'lime': $lime,
	'cucumber': $cucumber,
	'mint': $mint,
	'glacier': $glacier,
	'lagoon': $lagoon,
	'blueberry': $blueberry,
	'lavender': $lavender,
	'grape': $grape,
	'watermelon': $watermelon,
	'pumpkin': $pumpkin,
	'pineapple': $pineapple,
	'pagga': $pagga,
	'poplee': $poplee,
	'coreHR': $coreHR,
	'timmi': $timmi,
	'cleemy': $cleemy,
	'cc': $cc,
);

// Tokens : Elevation
$elevation: (
	surface: (
		'sunken': var(--palettes-neutral-50),
		'default': var(--palettes-neutral-25),
		'raised': var(--palettes-neutral-0),
		'backdrop': color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent),
	),
	shadow: (
		'raised': '0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-400) 20%, transparent)',
		'button': '0 2px 2px 0 color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent)',
		'overflow': '0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 0 4px color-mix(in srgb, var(--palettes-neutral-400) 32%, transparent), 0 0 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent)',
		'overlay': '0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent), 0 4px 12px 2px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent)',
	),
);

// Tokens : Colors
$colorInput: (
	text: var(--pr-t-color-text),
	text-placeholder: var(--palettes-neutral-400),
	text-placeholder-critical: var(--palettes-critical-400),
	text-suffix: var(--pr-t-color-text-subtle),
	text-disabled: var(--palettes-neutral-700),
	icon: var(--palettes-neutral-600),
	icon-disabled: var(--palettes-neutral-500),
	background: var(--palettes-neutral-0),
	background-critical: var(--palettes-critical-50),
	background-disabled: var(--palettes-neutral-50),
	border: var(--palettes-neutral-300),
	border-hover: var(--palettes-neutral-400),
	border-checked: var(--palettes-product-400),
	border-checked-hover: var(--palettes-product-600),
	border-critical: var(--palettes-critical-400),
	border-critical-hover: var(--palettes-critical-600),
);

$colorInputContrasted: (
	text-placeholder: var(--palettes-neutral-700),
	text-placeholder-critical: var(--palettes-critical-700),
	border: var(--palettes-neutral-600),
	border-hover: var(--palettes-neutral-700),
	border-critical: var(--palettes-critical-700),
	border-critical-hover: var(--palettes-critical-800),
);

$colorText: (
	text: var(--palettes-neutral-800),
	text-heading: var(--palettes-neutral-900),
	text-highlight: var(--palettes-neutral-900),
	text-subtle: var(--palettes-neutral-600),
	text-disabled: var(--palettes-neutral-500),
	text-reverse: var(--palettes-neutral-0),
	text-success: var(--palettes-success-700),
	text-warning: var(--palettes-warning-700),
	text-critical: var(--palettes-critical-700),
);

$breakpoints: (
	XXXS: 320px,
	XXS: 480px,
	XS: 640px,
	S: 800px,
	M: 1024px,
	L: 1280px,
	XL: 1366px,
	XXL: 1600px,
	XXXL: 1920px,
);

$spacings: (
	'0': 0,
	'25': 0.125rem,
	'50': 0.25rem,
	'75': 0.375rem,
	'100': 0.5rem,
	'150': 0.75rem,
	'200': 1rem,
	'250': 1.25rem,
	'300': 1.5rem,
	'400': 2rem,
	'500': 2.5rem,
	'600': 3rem,
	'700': 3.5rem,
	'800': 4rem,
) !default;

$sizes: (
	XS: (
		fontSize: 0.75rem,
		lineHeight: 1rem,
		verticalPadding: 0,
	),
	S: (
		fontSize: 0.875rem,
		lineHeight: 1.25rem,
		verticalPadding: 0.125rem,
	),
	M: (
		fontSize: 1rem,
		lineHeight: 1.5rem,
		verticalPadding: 0.125rem,
	),
	L: (
		fontSize: 1.125rem,
		lineHeight: 1.5rem,
		verticalPadding: 0.25rem,
	),
	XL: (
		fontSize: 1.375rem,
		lineHeight: 1.75rem,
		verticalPadding: 0.375rem,
	),
	XXL: (
		fontSize: 1.75rem,
		lineHeight: 2rem,
		verticalPadding: 0.25rem,
	),
	XXXL: (
		fontSize: 2.25rem,
		lineHeight: 2.5rem,
		verticalPadding: 0.5rem,
	),
);

// opacity is deprecated
$disabled: (
	'opacity': 0.4,
	'background': 'var(--palettes-neutral-100)',
	'color': 'var(--palettes-neutral-600)',
	'placeholder': 'var(--palettes-neutral-400)',
);

$animations: (
	'translate': 3rem,
	'function': ease,
	'iteration-count': 5,
);

$durations: (
	'fast': 150ms,
	'standard': 250ms,
	'slow': 350ms,
);

$loading: (
	'frontground': var(--palettes-500, var(--palettes-product-500)),
	'speed': 600ms,
	'borderWidth': 3px,
);

$textLink: (
	color: var(--palettes-product-700),
	hover: var(--palettes-product-800),
	disabled: var(--palettes-neutral-500), // disabled token candidate
);

// Deprecated

// $colors are deprecated
$colors: (
	'white': #ffffff,
	'black': #121212,
);

// $colorsRgb are deprecated
$colorsRgb: (
	'white': '255, 255, 255',
	'neutral-400': '172, 187, 215',
	'neutral-900': '19, 29, 53',
	'grey-400': '172, 187, 215',
	'grey-900': '19, 29, 53',
) !default;

// $borderRadius are deprecated
$borderRadius: (
	'M': 4px,
	'L': 8px,
	'XL': 12px,
	'full': 9999px,
) !default;