:root{

    /* Brand */
    --primary:#F97316;
    --primary-hover:#EA580C;

    --secondary:#1F2937;
    --accent:#F59E0B;

    /* Typography */
    --heading:#2D1B14;
    --text:#4B5563;
    --text-light:#6B7280;

    /* Background */
    --white:#FFFFFF;
    --bg:#FAFAF8;
    --border:#E5E7EB;

    /* Font */
    --font-primary:'Noto Sans',sans-serif;

    /* Shadow */
    --shadow:0 4px 20px rgba(0,0,0,.08);

    /* Transition */
    --transition:.3s ease;
	
	/* Font size */
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 15px;
	--fs-md: 16px;
	--fs-lg: 18px;
	--fs-xl: 20px;
	--fs-2xl: 22px;
	--fs-3xl: 24px;
	--fs-4xl: 28px;

}

body {
  font-family: var(--font-primary);
	font-size: var(--fs-base);
}

h1,h2,h3,h4,h5,h6{
    color:var(--heading);
    font-weight:700;
    line-height:1.3;
    margin-bottom:16px;
}

h1{
    font-size:var(--fs-4xl);
}

h2{
    font-size:var(--fs-3xl);
}

h3{
    font-size:var(--fs-2xl);
}

h4{
    font-size:var(--fs-xl);
}

h5{
    font-size:var(--fs-lg);
}

h6{
    font-size:var(--fs-md);
}

p{
    margin-bottom:20px;
}

a{
    color:var(--primary);
    transition:var(--transition);
}

a:hover{
    color:var(--primary-hover);
}

@media(max-width:768px){

    :root{
        --fs-xs: 11px;
        --fs-sm: 12px;
        --fs-base: 14px;
        --fs-md: 15px;
        --fs-lg: 17px;
        --fs-xl: 18px;
        --fs-2xl: 20px;
        --fs-3xl: 22px;
        --fs-4xl: 24px;
    }

}