@use "sass:color";
@use "../../core/functions" as function;
@use "../../core/mixin" as mixin;

// Configuraciones
$max-width: 1200px !default;
$l-unit: 0.5rem !default;
$gap: $l-unit * 4 !default; // 2rem

:root {
	--max-width: $max-width;

	// color default del tema
	//Paleta de colores
	$first-color: #279bee;
	--first-color: $first-color;
	--second-color: #ee4f27;
	--third-color: #28a745;
	--four-color: #eeeeee;

	//Color de texto default
	--text-color-default: #575e66;

	--color-white: #ffffff;

	//Custom Colores Botones default
	$color-button-default: $first-color;
	--color-button-default: #{$color-button-default};
	--color-button-alt-default: #{color.scale(
			$color-button-default,
			$lightness: -5%
		)};
	--color-button-text-default: #ffffff;
	--color-button-disable-default: #{color.scale(
			$color-button-default,
			$lightness: 20%
		)};
	--color-button-disable-text-default: #ffffff;
	--color-button: var(--color-button-default);
	--color-button-alt: var(--color-button-alt-default);
	--color-button-disable: var(--color-button-disable-default);
	--color-button-text: var(--color-button-text-default);
	--color-button-disable-text: var(--color-button-disable-text-default);
	--round-width: 32px;
	--round-height: 32px;

	//Variables para bordes
	--border-color-default: #ddd;
	--border-color: var(--border-color-default);
	--solid-style: solid;
	--dotted-style: dotted;
	--dashed-style: dashed;
	--double-style: double;
	--border-style-default: var(--solid-style);
	--border-style: var(--border-style-default);
	--border-size-default: 1px;
	--border-size: var(--border-size-default);

	//Espacio entre cajas en display grid
	--gap-default: 1rem;
	--gap: var(--gap-default);

	--border-form-color-default: #dbdbdb;
	--border-form-color: var(--border-form-color-default);
	--text-form-color-default: #919191;
	--text-form-color: var(--text-form-color-default);
	--label-text-form-color-default: #363839;
	--label-text-form-color: var(--label-text-form-color-default);
	--background-inside-form-color-default: #fafafa;
	--background-inside-form-color: var(--background-inside-form-color-default);
	--placeholder-form-color-default: #bebebe;
	--placeholder-form-color: var(--placeholder-form-color-default);

	// CSS variables for typography
	// Font sizes
	--bigger-font-size: #{function.toRem(28px)};
	--h1-font-size: #{function.toRem(24px)};
	--h2-font-size: #{function.toRem(20px)};
	--h3-font-size: #{function.toRem(16px)};
	--normal-font-size: #{function.toRem(15px)};
	--small-font-size: #{function.toRem(13px)};
	--smaller-font-size: #{function.toRem(12px)};
	--supersmall-font-size: #{function.toRem(11px)};
	--heading-line-height: 1.3;
	--body-line-height: normal;

	// Font sizes from lg breakpoint (64em ~ 1024px)
	@include mixin.from(lg) {
		--bigger-font-size: #{function.toRem(36px)};
		--h1-font-size: #{function.toRem(32px)};
		--h2-font-size: #{function.toRem(24px)};
		--h3-font-size: #{function.toRem(20px)};
		--normal-font-size: #{function.toRem(16px)};
		--small-font-size: #{function.toRem(14px)};
		--smaller-font-size: #{function.toRem(13px)};
		--supersmall-font-size: #{function.toRem(12px)};
	}
	& {
		--selection-color: var(
			--second-color
		); // ✅ Se mantiene después sin causar errores
	}
}