/* color: rgb(235, 235, 235); #EBEBEB */
/* color: rgb(240, 240, 240); #F0F0F0 */
/* color: rgb(200, 200, 200); #C8C8C8 */
/* color: rgb(160, 160, 160); #A0A0A0 */

:root {
    --color-primary: #388697;
    --color-secondary: #EEC643;
    --color-accent: #CC2936;

    --color-border: #141414;


    --color-background: #EEF0F2;
    --color-text: #141414;
    --color-muted: #666666;


    --color-primary-background: rgb(15, 15, 15);
    --color-secondary-background: rgb(26, 26, 26);
    --color-accent: rgb(212 175 55);
    --color-primary-text: rgb(235, 235, 235);
    --color-secondary-text: rgb(200, 200, 200); 
    --color-muted-text: rgb(161, 161, 161); 




    --color-primary-background: rgb(15, 15, 15);
    --color-primary-background-90: rgba(15, 15, 15, 0.9);
    --color-primary-background-75: rgba(15, 15, 15, 0.75);
    --color-primary-background-25: rgba(15, 15, 15, 0.25);
    --color-secondary-background: rgb(235, 235, 235);
    --color-secondary-background-75: rgba(235, 235, 235, 0.75);
    --color-secondary-background-25: rgba(235, 235, 235, 0.25);
    --color-muted-background: rgb(26, 26, 26);
    --color-muted-background: rgb(36, 36, 36);
    --color-muted-background-90: rgba(36, 36, 36, 0.9);
    --color-muted-background-85: rgba(36, 36, 36, 0.85);
    --color-muted-background-60: rgba(36, 36, 36, 0.6);
    --color-muted-background-40: rgba(36, 36, 36, 0.4);

    
    --color-primary-text: rgb(235, 235, 235);
    /* --color-secondary-text: 200, 200, 200;  */
    --color-secondary-text: rgb(15, 15, 15); 
    --color-muted-text: rgb(161, 161, 161); 

    /* --color-primary-border: 15, 15, 15;
    --color-secondary-border: 235, 235, 235; */
    
    --color-primary-border: rgb(235, 235, 235);
    --color-secondary-border: rgb(15, 15, 15);

    /* Do i need this? */
    --color-muted-border: rgb(161, 161, 161); 

    --color-accent: rgb(212, 175, 55);
    --color-accent-75: rgba(212, 175, 55, 0.75);
    --color-accent-25: rgba(212, 175, 55, 0.25);
    /* --color-accent-75: rgba(212, 175, 55, 0.75); */

    --color-red: #e34b57;



    --color-primary-backdrop: rgb(15, 15, 15);


    --color-green: rgb(37, 211, 102);
    --color-green-75: rgba(37, 211, 102, 0.75);

}

[data-theme="light2"] {
  --color-background: #141414;
  --color-text: #EEF0F2;
  --color-muted: #AAAAAA;

  --color-border: #333333;

  /* keep brand colors or slightly tune them */
  --color-primary: #4fa6b8;
  --color-secondary: #f0d264;
  --color-accent: #e34b57;

  



    --color-primary-background: rgb(15, 15, 15);
    --color-primary-background-90: rgba(15, 15, 15, 0.9);
    --color-primary-background-25: rgba(15, 15, 15, 0.25);
    --color-secondary-background: rgb(235, 235, 235);
    --color-secondary-background-25: rgba(235, 235, 235, 0.25);
    --color-muted-background: rgb(26, 26, 26);
    --color-muted-background: rgb(36, 36, 36);
    --color-muted-background-90: rgba(36, 36, 36, 0.9);
    --color-primary-text: rgb(235, 235, 235);
    --color-secondary-text: rgb(15, 15, 15); 
    --color-muted-text: rgb(161, 161, 161); 
    --color-primary-border: rgb(235, 235, 235);
    --color-secondary-border: rgb(15, 15, 15);
    --color-accent: rgb(212 175 55);


    --color-primary-background: rgb(235, 235, 235);
    --color-primary-background: rgb(200, 200, 200);
    --color-primary-background-90: rgba(235, 235, 235, 0.9);
    /* --color-primary-background-90: rgba(15, 15, 15, 0.9); */

    --color-secondary-background: rgb(15, 15, 15);
    --color-muted-background: rgb(219, 219, 219);
    --color-muted-background: rgb(180, 180, 180);
    --color-muted-background-90: rgba(219, 219, 219, 0.9);
    /* --color-muted-background-90: rgba(36, 36, 36, 0.9); */

    --color-primary-text: rgb(15, 15, 15); 
    --color-secondary-text: rgb(235, 235, 235);
    --color-muted-text: rgb(102, 102, 102); 

    --color-primary-border: rgb(15, 15, 15);
    --color-secondary-border: rgb(235, 235, 235);
    --color-accent: rgb(212 175 55);



    /* Main surfaces flip from near-black to the off-white */
    --color-primary-background: rgb(235, 235, 235);
    --color-primary-background-90: rgba(235, 235, 235, 0.9);

    /* Secondary backgrounds (often used for high-contrast sections) flip to the dark tone */
    --color-secondary-background: rgb(15, 15, 15);
    --color-secondary-background-25: rgba(15, 15, 15, 0.25);

    /* Muted backgrounds become a slightly darker grey/tint than the primary white 
       to create depth for cards or input fields */
    --color-muted-background: rgb(220, 220, 220); 
    /* --color-muted-background: rgb(200, 200, 200);  */
    --color-muted-background-90: rgba(220, 220, 220, 0.9);
    --color-muted-background-85: rgba(220, 220, 220, 0.85);

    /* Text colors flip entirely */
    --color-primary-text: rgb(15, 15, 15);
    --color-secondary-text: rgb(235, 235, 235); 

    /* Muted text needs to be darkened for accessibility on a light background */
    --color-muted-text: rgb(100, 100, 100); 

    /* Borders: Primary becomes subtle/dark, Secondary becomes light */
    /* --color-primary-border: rgb(200, 200, 200); Softer than pure black for a modern look */
    /* --color-secondary-border: rgb(15, 15, 15); */

    /* Accent: Gold works well on both, but often needs a tiny bit more 
       saturation or depth to remain "premium" on bright white */
    --color-accent: rgb(190, 150, 40); /* A slightly deeper "Old Gold" for better legibility */


    /* --color-primary-backdrop: rgb(30, 30, 30); */

    /* --color-primary-background-75: rgba(235, 235, 235, 0.75); */


}

::-webkit-scrollbar {
    width: 0.625rem;
}

::-webkit-scrollbar-track {
    background: var(--color-primary-background);
}

::-webkit-scrollbar-thumb {
    background: var(--color-secondary-background);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

html[lang="ar"] body {
  font-family: "Noto Sans Arabic", sans-serif;
  /* color: red */
}


body {
    /* height: 1000px; */
    /* min-height: 100dvh; */
    /* font-family: 'Josefin Sans', sans-serif; */
    /* background-color: var(--normal-white); */
    /* background-color: var(--color-background); */
    /* font-family: 'Josefin Sans', sans-serif; */

    /* font-family: "Roboto", sans-serif; */
  /* font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100; */

    background-color: var(--color-primary-background);
    text-align: start;

    /* overflow-x: hidden; */

  font-family: "Noto Sans", sans-serif;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

html, body {
    /* overflow-x: hidden; */
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}




.theme-transition * {
  transition: color .5s ease, background-color .5s ease, border-color .5s ease;
  /* transition: color .5s ease, background-color .5s ease; */
  /* transition: all .5s ease; */
}


#toast-container > div {
    opacity: 1;
}


.link-hover, 
.link-hover:hover {
    text-decoration: none;
}

.link-hover span {
    position: relative;
    /* font-size: 1.125rem; */
}

.link-hover span::before, 
.link-hover span::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    opacity: 1;
    background: var(--color-accent);
    transition: width 0.3s ease-in-out;
}

.link-hover span::before {
    bottom: -0.3rem;
    inset-inline-start: 0%;
}

.link-hover span::after {
    bottom: -0.6rem;
    inset-inline-end: 0%;
}

.link-hover:hover span::before, 
.link-hover:hover span::after {
    width: 100%;
    opacity: 1;
}






.section-title--full,
.section-title--half {
    position: relative;
    display: inline-block;
    margin-bottom: 1.25rem;
}


.section-title--half::after,
.section-title--full::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    height: 2px;
    background-color: var(--color-accent);
    opacity: 0.8;
}

.section-title--half::after {
    left: 50%;
    width: 60%;
    transform: translateX(-50%);
}

.section-title--full::after {
    left: 0%;
    width: 100%;
}





.floating-group {
    position: relative;
}

.floating-group__input {
    padding: 8px 0;
    padding: 0.75rem;
    /* padding: 0.5rem; */
    /* box-sizing: content-box; */
    height: auto !important;
    /* border: 0; */
	/* border-bottom: 1px solid red; */
    /* border: solid 1px red; */
	/* background-color: transparent; */
    border: solid 1px var(--color-muted-border);
    color: var(--color-primary-text);
    width: 100%;
    font-size: 1rem;
    background-color: var(--color-primary-background);
    background-color: var(--color-muted-background);
	transition: all 0.3s ease-in-out;
}

.floating-group__input:focus {
	/* outline: none; */
	/* border-bottom: 1px solid var(--dark-gray); */

    border-color: var(--color-accent);
    /* box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); */
    box-shadow: 0 0 0 0.2rem var(--color-accent-25);
    background-color: var(--color-muted-background);
    color: var(--color-primary-text);



}

.floating-group__input::placeholder {
	color: transparent;
    opacity: 0;
}

.floating-group__label {
	position: absolute;
	top: 50%;
	/* left: 0; */
	/* left: 1rem; */
    inset-inline-start: 1rem;
	transform: translateY(-50%);
    color: var(--normal-black);
    color: var(--color-muted-text);  
    transition: all 0.3s ease-in-out;
    cursor: text;
    font-size: 1.1rem;
    font-size: 1rem;
    padding: 0 0.5rem;

}

.floating-group__input:focus + .floating-group__label,
.floating-group__input:not(:placeholder-shown) + .floating-group__label {
	top: 0;
	color: var(--color-accent);
    /* color: darkgreen; */
    color: var(--color-primary-text);  

    background-color: var(--color-muted-background);
	font-size: 1rem;
}

.floating-group__input:focus + .floating-group__label {
	color: var(--color-accent);

}

.form-error {
    /* color: var(--normal-red); */
    /* color: red; */
    color: var(--color-red);
    font-size: 0.9rem;
    text-align: inline-start;
    font-style: italic;
    display: block;
}


textarea {
    resize: none;
}