/* ----------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- root.css --------------------------------------------------- */
/* ---------------------------- Developed by 'Tsakiris Studio' do not modify this file. ---------------------------- */
/* ------------------------  Latest version (--CD-01042026 --MD-01042026 --BUILD-0.0.0-1) -------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */


/* ----------------------------------------------------- ROOT ------------------------------------------------------ */
:root {

	/* --------------------------------------------------- FONTS --------------------------------------------------- */
	--font-primary : Arial, sans-serif ;
	--font-mono : "Courier New", monospace ;
	--font-accent : Georgia, "Times New Roman", serif ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------- TEXTURES -------------------------------------------------- */
	--texture-section_background-home : url("../assets/textures/section_backgrounds/home.webp") ;
	--texture-section_background-products : url("../assets/textures/section_backgrounds/products.webp") ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* --------------------------------------------------- SIZES --------------------------------------------------- */
	--size-1 : clamp(0.75px, 0.048vw, 1.25px) ;
	--size-2 : clamp(1.5px, 0.097vw, 2.5px) ;
	--size-4 : clamp(3.0px, 0.195vw, 5.0px) ;
	--size-6 : clamp(5.0px, 0.292vw, 7.0px) ;
	--size-8 : clamp(6.0px, 0.390vw, 10.0px) ;
	--size-10 : clamp(8.0px, 0.488vw, 12.0px) ;
	--size-12 : clamp(10.0px, 0.585vw, 14.0px) ;
	--size-13 : clamp(12.0px, 0.634vw, 14.0px) ;
	--size-14 : clamp(13.0px, 0.683vw, 15.0px) ;
	--size-16 : clamp(12.0px, 0.781vw, 20.0px) ;
	--size-24 : clamp(20.0px, 1.171vw, 28.0px) ;
	--size-32 : clamp(26.0px, 1.562vw, 38.0px) ;
	--size-34 : clamp(30.0px, 1.660vw, 38.0px) ;
	--size-36 : clamp(32.0px, 1.757vw, 40.0px) ;
	--size-48 : clamp(40.0px, 2.343vw, 56.0px) ;
	--size-56 : clamp(48.0px, 2.734vw, 64.0px) ;
	--size-64 : clamp(56.0px, 3.125vw, 72.0px) ;
	--size-72 : clamp(64.0px, 3.515vw, 80.0px) ;
	--size-88 : clamp(80.0px, 4.296vw, 96.0px) ;
	--size-96 : clamp(88.0px, 4.687vw, 104.0px) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ---------------------------------------------- LETTER SPACING ----------------------------------------------- */
	--letter_spacing-xxxsmall : clamp(0.25px, 0.024vw, 0.75px) ;     /* letter-spacing : 0.5px ;                    */
	--letter_spacing-xxsmall : clamp(0.5px, 0.036vw, 1px) ;         /* letter-spacing : 0.75px ;                   */
	--letter_spacing-xsmall : clamp(0.75px, 0.048vw, 1.25px) ;     /* letter-spacing : 1px ;                      */
	--letter_spacing-small : clamp(1px, 0.061vw, 1.5px) ;         /* letter-spacing : 1.25px ;                   */
	--letter_spacing-medium : clamp(1.25px, 0.073vw, 1.75px) ;   /* letter-spacing : 1.5px ;                    */
	--letter_spacing-large : clamp(1.5px, 0.085vw, 2px) ;       /* letter-spacing : 1.75px ;                   */
	--letter_spacing-xlarge : clamp(1.75px, 0.097vw, 2.25px) ; /* letter-spacing : 2px ;                      */
	/* ----------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------ FONT SIZES ------------------------------------------------- */
	--font_size-12 : clamp(11.0px, 0.585vw, 13.0px) ;
	--font_size-13 : clamp(12.0px, 0.634vw, 15.0px) ;
	--font_size-14 : clamp(12.0px, 0.683vw, 16.0px) ;
	--font_size-15 : clamp(13.0px, 0.732vw, 17.0px) ;
	--font_size-16 : clamp(14.0px, 0.781vw, 18.0px) ;
	--font_size-17 : clamp(15.0px, 0.830vw, 19.0px) ;
	--font_size-18 : clamp(16.0px, 0.878vw, 20.0px) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------- BOX SIZES ------------------------------------------------- */
	--box_size-128 : clamp(96.0px, 6.250vw, 160.0px) ;
	--box_size-160 : clamp(128.0px, 7.812vw, 192.0px) ;
	--box_size-192 : clamp(160.0px, 9.375vw, 224.0px) ;
	--box_size-224 : clamp(192.0px, 10.937vw, 256.0px) ;
	--box_size-256 : clamp(224.0px, 12.500vw, 288.0px) ;
	--box_size-288 : clamp(256.0px, 14.062vw, 320.0px) ;
	--box_size-320 : clamp(288.0px, 15.625vw, 352.0px) ;
	--box_size-352 : clamp(320.0px, 17.187vw, 384.0px) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ----------------------------------------------- CUSTOM SIZES ------------------------------------------------ */
	--nav-height : var(--box_size-128) ;
	--section-height : calc(100vh - var(--nav-height)) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------- SETTINGS -------------------------------------------------- */
	scroll-padding-top : var(--nav-height) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* -------------------------------------------------- COLORS --------------------------------------------------- */

	/* Accent Scale */
	--color-accent-100 : #ffca99 ;
	--color-accent-100-rgb : 255, 202, 153 ;
	--color-accent-200 : #ffc38c ;
	--color-accent-200-rgb : 255, 195, 140 ;
	--color-accent-300 : #ffbc7f ;
	--color-accent-300-rgb : 255, 188, 127 ;
	--color-accent-400 : #ffb673 ;
	--color-accent-400-rgb : 255, 182, 115 ;
	--color-accent-500 : #ffaf66 ;
	--color-accent-500-rgb : 255, 175, 102 ;
	--color-accent-600 : #e59d5c ;
	--color-accent-600-rgb : 229, 157, 92 ;
	--color-accent-700 : #cc8c52 ;
	--color-accent-700-rgb : 204, 140, 82 ;
	--color-accent-800 : #b37a47 ;
	--color-accent-800-rgb : 179, 122, 71 ;
	--color-accent-900 : #99683d ;
	--color-accent-900-rgb : 153, 104, 61 ;

	/* Primary Scale */
	--color-primary-100 : #904b1a ;
	--color-primary-100-rgb : 144, 75, 26 ;
	--color-primary-200 : #834418 ;
	--color-primary-200-rgb : 131, 68, 24 ;
	--color-primary-300 : #773d16 ;
	--color-primary-300-rgb : 119, 61, 22 ;
	--color-primary-400 : #6a3713 ;
	--color-primary-400-rgb : 106, 55, 19 ;
	--color-primary-500 : #5d3011 ;
	--color-primary-500-rgb : 93, 48, 17 ;
	--color-primary-600 : #50290f ;
	--color-primary-600-rgb : 80, 41, 15 ;
	--color-primary-700 : #44230c ;
	--color-primary-700-rgb : 68, 35, 12 ;
	--color-primary-800 : #371c0a ;
	--color-primary-800-rgb : 55, 28, 10 ;
	--color-primary-900 : #2a1608 ;
	--color-primary-900-rgb : 42, 22, 8 ;

	/* Google Colors */
	--color-google_red : #d62d20 ;
	--color-google_blue : #0057e7 ;
	--color-google_green : #008744 ;
	--color-google_orange : #ffa700 ;

	/* Black Opacities */
	--color-black-rgb : 0, 0, 0 ;

	--color-black-10 : rgba(0, 0, 0, 0.1) ;
	--color-black-20 : rgba(0, 0, 0, 0.2) ;
	--color-black-30 : rgba(0, 0, 0, 0.3) ;
	--color-black-40 : rgba(0, 0, 0, 0.4) ;
	--color-black-50 : rgba(0, 0, 0, 0.5) ;
	--color-black-60 : rgba(0, 0, 0, 0.6) ;
	--color-black-70 : rgba(0, 0, 0, 0.7) ;
	--color-black-80 : rgba(0, 0, 0, 0.8) ;
	--color-black-90 : rgba(0, 0, 0, 0.9) ;

	/* Theme Colors */
	--color-accent : var(--color-accent-500) ;
	--color-accent-rgb : var(--color-accent-500-rgb) ;
	--color-primary : var(--color-primary-500) ;
	--color-primary-rgb : var(--color-primary-500-rgb) ;

	/* ------------------------------------------------------------------------------------------------------------- */

	/* --------------------------------------------- LINEAR GRADIENTS ---------------------------------------------- */

	/* Vertical Seperator Gradient */
	--linear_gradient-v_seperator : linear-gradient(

		180deg,

		rgba(42, 22, 8, 0.0) 0%,
		rgba(42, 22, 8, 0.5) 40%,
		rgba(42, 22, 8, 0.5) 60%,
		rgba(42, 22, 8, 0.0) 100%

	) ;

	/* Horizontal Seperator Gradient */
	--linear_gradient-h_seperator : linear-gradient(

		90deg,

		rgba(42, 22, 8, 0.0) 0%,
		rgba(42, 22, 8, 0.6) 30%,
		rgba(42, 22, 8, 0.6) 70%,
		rgba(42, 22, 8, 0.0) 100%

	) ;

	/* Google Gradient */
	--linear_gradient-google : linear-gradient(

		90deg,

		var(--color-google_green),
		var(--color-google_blue),
		var(--color-google_red),
		var(--color-google_orange)

	) ;

	/* ------------------------------------------------------------------------------------------------------------- */

	/* ----------------------------------------------- TEXT SHADOWS ------------------------------------------------ */
	--text_shadow-xsmall : 0 1px 2px var(--color-black-60) ;
	--text_shadow-small : 0 2px 2px var(--color-black-60) ;
	--text_shadow-medium : 0 4px 4px var(--color-black-60) ;
	--text_shadow-large : 0 8px 8px var(--color-black-60) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------ BOX SHADOWS ------------------------------------------------ */
	--box_shadow-xxsmall : 0 1px 1px var(--color-black-40) ;
	--box_shadow-xsmall : 0 1px 2px var(--color-black-40) ;
	--box_shadow-small : 0 2px 3px var(--color-black-40) ;
	--box_shadow-medium : 0 6px 9px var(--color-black-40) ;
	--box_shadow-large : 0 12px 18px var(--color-black-40) ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------- MATERIALS ------------------------------------------------- */
	--material-cork : url("../assets/textures/materials/cork.webp") ;
	--material-stone : url("../assets/textures/materials/stone.webp") ;
	/* ------------------------------------------------------------------------------------------------------------- */

	/* ------------------------------------------------ TRANSITIONS ------------------------------------------------ */
	--transition-fast : 150ms ;
	--transition-normal : 250ms ;
	--transition-slow : 500ms ;

	--transition-speed : var(--transition-normal) ;

	--transition-color : color var(--transition-speed) ease ;
	--transition-width : width var(--transition-speed) ease ;
	--transition-height : height var(--transition-speed) ease ;
	--transition-opacity : opacity var(--transition-speed) ease ;
	--transition-transform : transform var(--transition-speed) ease ;
	--transition-background : background var(--transition-speed) ease ;
	--transition-background_color : background-color var(--transition-speed) ease ;
	/* ------------------------------------------------------------------------------------------------------------- */

}
/* ----------------------------------------------------------------------------------------------------------------- */