@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    local('Geist'),          
    local('Geist Regular'),
    url("../font/Geist-VariableFont_wght.woff2") format("woff2 supports variations"),
    url("../font/Geist-VariableFont_wght.woff2") format("woff2-variations");
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: 
  local('Raleway'),
  local('Raleway Regular'),
  url("../font/Raleway-VariableFont_wght.woff2") format("woff2 supports variations"),
  url("../font/Raleway-VariableFont_wght.woff2") format("woff2-variations");
}

@font-face {
  font-family: 'Birthstone';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: 
  local('Birthstone'),
  local('Birthstone Regular'),
  url(../font/Birthstone-Regular.woff2) format('woff2');
  
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: 
  local('Oswald'),
  local('Oswald Regular'),
  url("../font/Oswald-VariableFont_wght.woff2") format('woff2 supports variations'),
  url("../font/Oswald-VariableFont_wght.woff2") format('woff2-variations');
}

:root{
  
  --c-primary:          hsl(202 12% 87% / 1); 
  --c-secondary:        hsl(69 14% 73% / 1);
  --c-light:            hsl(33 29% 94% / 1);
  --c-light-90:         hsl(33 29% 94% / 0.902);
  
  --c-contrast:         hsl(203 60% 39% / 1);
  --c-dark:             hsl(68, 5%, 29%);
  --c-dark-light:       hsl(72, 6%, 51%);

  --c-input-bg:         hsl(0, 0%, 90%);
  
  --c-text-primary:     hsl(0 0% 15% / 1);
  --c-text-secondary:   hsl(0 0% 30% / 1);
  --c-text-light:       var(--c-light);

  --c-error-bg:         #FFBABA;
  --c-error-bg-50:      hsl(0 100% 86% / 0.5);
  --c-error-bg-hover:   #FFA4A4;
  --c-error-color:      #D8000C;

  --c-warn-bg:          #FEEFB3;
  --c-warn-bg-50:       hsl(48 97% 85% / 0.5);
  --c-warn-bg-hover:    #FED7A0;
  --c-warn-color:       #9F6000;

  --c-success-bg:       #DFF2BF;
  --c-success-bg-50:    hsl(82 66% 85% / 0.5);
  --c-success-bg-hover: #B4F298;
  --c-success-color:    #4F8A10;

  --c-info-bg:          #D9EDF7;
  --c-info-bg-50:       hsl(200 65% 91% / 0.5);
  --c-info-bg-hover:    #D5D8F7;
  --c-info-color:       #31708F;

  --shadow-soft:          0px 0px 01px rgba(3, 7, 18, 0.00),
                          0px 0px 02px rgba(3, 7, 18, 0.00),
                          0px 0px 03px rgba(3, 7, 18, 0.01),
                          0px 0px 04px rgba(3, 7, 18, 0.01),
                          0px 0px 06px rgba(3, 7, 18, 0.01),
                          0px 0px 08px rgba(3, 7, 18, 0.01),
                          0px 0px 10px rgba(3, 7, 18, 0.01),
                          0px 0px 12px rgba(3, 7, 18, 0.01);
  
  
  /* --font-rubik:     1rem "Rubik", sans-serif; */
  --font-geist:     1rem "Geist", sans-serif;
  --font-raleway:   1rem "Raleway", sans-serif;
  --font-calli:     1rem "Birthstone", serif;
  --font-oswald:    1rem "Oswald", serif;

  --b-radius-l:   1rem;
  --b-radius-m:   0.5rem;
  --b-radius-s:   0.25rem;

  --distance-xxl: 3.6rem;
  --distance-xl:  2.4rem;
  --distance-l:   1.2rem;
  --distance-m:   0.8rem;
  --distance-s:   0.4rem;
  --distance-xs:  0.2rem;

  
}

*, 
*::before, 
*::after{ 
  box-sizing: border-box;
  margin:0;
}

img, 
picture, 
video, 
canvas, 
svg{
  display: block;
  max-width: 100%;
}



input,
button,
select,
a.btn,
a.btn:visited{
  width:100%;
  height:2rem;
  padding: var(--distance-s);
  border:none;
  font:400 var(--font-geist);
  font-size:0.8rem;
  line-height:2rem;
  letter-spacing: 0.2rem;
  border-radius:var(--b-radius-s);
  transition: all 0.5s ease-in-out;
  caret-color: var(--c-dark);
}

textarea{
  width:100%;
  aspect-ratio: 3/1;
  padding: var(--distance-s);
  background:var(--c-input-bg);
  border:none;
  outline:none;
  font:400 var(--font-geist);
  font-size:0.8rem;
  line-height:1.4;
  border-radius:var(--b-radius-s);
  resize:none;
  transition: all 0.5s ease-in-out;
  caret-color: var(--c-dark);
  border-top:2px solid var(--c-input-bg);
  border-bottom:2px solid var(--c-input-bg);
  outline:1px solid transparent;
  &:focus,
  &:focus-within{
    border-color: var(--c-contrast);
    border-radius: 2px;
    transition: all 0.5s ease-in-out;  
  }
}

input:not([type="submit"]){
  color: var(--c-text-secondary);        
  border-top:2px solid var(--c-input-bg);
  border-bottom:2px solid var(--c-input-bg);
  background:var(--c-input-bg);
  outline:1px solid transparent;
}

input:not([type="submit"]):focus,
input:not([type="submit"]):focus-within{
  border-color: var(--c-contrast);
  border-radius: 2px;
  transition: all 0.5s ease-in-out;
  &::placeholder{
    color:#999999;
  }
}

input:not([type="submit"]):hover{
  outline: 1px solid #d3d3d3;
  transition: all 0.5s ease-in-out;
}

input:not([type="submit"]):invalid{
  border-color:#e29d9d;
  transition: all 0.5s ease-in-out;
}


input:not(:placeholder-shown):valid{
  border-color:#58dbad;
  transition: all 0.5s ease-in-out;
}

button,
a.btn,
a.btn:visited{
  height:2rem;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:24px 16px;
  font-size:1rem;
  background-color: var(--c-secondary);
  color:var(--c-text-secondary);
  transition: all 0.5s ease-in-out;
  cursor:pointer;
  &:hover{
    background-color: var(--c-dark-light);
    color: var(--c-text-light);
    transition: all 0.5s ease-in-out;
  }
}

form label{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:flex-start;
  row-gap: var(--distance-xs);
  & span.error{
    display:block;
    visibility: hidden;
    padding:var(--distance-xs);
  }
  &:has(:invalid):not(:focus-within) span.error{
    visibility: visible;
    background:var(--c-error-bg);
    border:none;
    border-radius: var(--b-radius-s);
  }
  & span{
    font-size:0.7rem;
    color: var(--c-text-secondary);
  }
}

fieldset{
  display:flex;
  flex-direction: column;
  gap:var(--distance-l);
  width:100%;
  border:none;
  outline: none;
  padding:0;
  margin:0;
  padding:var(--distance-s) 0;
}


:focus:not(:focus-visible) {
  outline: none;
}

a{
  text-decoration:none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6{
  overflow-wrap: break-word;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

html{
  width:100%;
  height:100vh;
  font:400 var(--font-geist);
  scroll-behavior: smooth;
  background: linear-gradient(45deg, hsl(218 1% 73.3%), hsl(240 1% 85.1%), hsl(206 1% 95.5%), hsl(0 0% 98%));
  background-attachment: fixed;
  background-repeat: no-repeat;
}




#toasts{
  width:100%;
  position:fixed;
  top:0;
  right:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:var(--distance-m);
  padding:var(--distance-m);
  z-index:50;
  & .toast{
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:  "icon headline close"
                          "icon description close";
    width:min(96vw, 400px);
    padding:var(--distance-m) 0;
    column-gap: var(--distance-s);
    border-left:4px solid var(--c-light);
    border-radius: var(--b-radius-s);
    background-color: var(--c-light);
    color: var(--c-text-primary);
    font: 400 var(--font-geist);
    outline: 1px solid var(--c-error-bg-50);
    box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.20),
    0px 1px 1px rgba(3, 7, 18, 0.16),
    0px 1px 1px rgba(3, 7, 18, 0.12),
    0px 3px 3px rgba(3, 7, 18, 0.08),
    0px 4px 4px rgba(3, 7, 18, 0.04);
    & i{
      grid-area: icon;
      width:100%;
      height:100%;
      display:flex;
      justify-content: center;
      align-items: center;
      padding: var(--distance-s);
      border-right:1px solid var(--c-input-bg);
      & svg{
        padding: var(--distance-xs);
        background-color: var(--c-error-bg-50);
        fill: var(--c-error-color);
        border-radius:var(--b-radius-m);
        @supports (corner-shape: squircle) {
          corner-shape: squircle;
          border-radius:100%;
        }
      }
    }
    & h3{
      grid-area:headline;
      width:100%;
      height:100%;
      display:flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-end;
      font-size: 1rem;
      font-weight: 500;
      line-height:1;
    }
    & p.description{
      grid-area: description;
      width:100%;
      height:100%;
      display:flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      color: var(--c-text-secondary);
      font-size:0.8rem;
    }
    & p.close{
      grid-area: close;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      & svg{
        padding:var(--distance-xs);
        width:calc(18px + 2 * var(--distance-xs));
        background-color: transparent;
        aspect-ratio: 1;
        border-radius:var(--b-radius-m);
        @supports (corner-shape: squircle) {
          corner-shape: squircle;
          border-radius:100%;
        }
        cursor: pointer;
        fill: var(--c-secondary);
        transition: all 0.5s ease-in-out;
        &:hover{
          background: var(--c-input-bg);
          transition: all 0.5s ease-in-out;
        }
      }
    }
    &.success{
      border-color: var(--c-success-color);
      & i svg{
        background-color: var(--c-success-bg-50);
        fill: var(--c-success-color);
      }
    }
    &.info{
      border-color: var(--c-info-color);
      & i svg{
        background-color: var(--c-info-bg-50);
        fill: var(--c-info-color);
      }
    }
    &.warning{
      border-color: var(--c-warn-color);
      & i svg{
        background-color: var(--c-warn-bg-50);
        fill: var(--c-warn-color);
      }
    }
    &.error{
      border-color: var(--c-error-color);
      & i svg{
        background-color: var(--c-error-bg-50);
        fill: var(--c-error-color);
      }
    }
  }
}