@layer reset, tokens, base, theme, components;

/* -------- VARIABLES -------- */
@layer tokens {
  :root {
    /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,2560,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.7813rem, 0.7782rem + 0.0136vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9273rem + 0.0455vw, 1rem);
    --step-0: clamp(1.125rem, 1.1045rem + 0.0909vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.3152rem + 0.1545vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5655rem + 0.2423vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.8626rem + 0.3618vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.2152rem + 0.5229vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.6332rem + 0.7384vw, 3.8147rem);

    /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,2560,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5523rem + 0.0455vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8648rem + 0.0455vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.1045rem + 0.0909vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6568rem + 0.1364vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.2091rem + 0.1818vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.3136rem + 0.2727vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.4182rem + 0.3636vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.6273rem + 0.5455vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2614rem + 0.2273vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.5011rem + 0.2727vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.8136rem + 0.2727vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 1.0023rem + 0.5455vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.5545rem + 0.5909vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 2.0045rem + 1.0909vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 3.1091rem + 1.1818vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 4.0091rem + 2.1818vw, 7.5rem);

    /* custom  */ 
    --fluid-tiny: clamp(0.0313rem, 0.0185rem + 0.0568vw, 0.0625rem);
    --logo-color: black;
  }
}

/* ---------- RESET ---------- */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
  }

  a {
    color: var(--text-color);
  }

  /* headers */
  h1, h2, h3, h4, h5, h6 {
    margin: revert;
  }

  h1 {
    font-size: var(--step-5);
  }
  h2 {
    font-size: var(--step-4);
  }
  h3 {
    font-size: var(--step-3);
  }
  h4 {
    font-size: var(--step-2);
  }
  h5 {
    font-size: var(--step-1);
  }
  h6 {
    font-size: var(--step-0);
  }

  p {
    font-size: var(--step-0);
    margin: 1em 0;
  }

  a {
    font-size: var(--step--);
  }

  hr {
    margin: var(--space-m) 0;
    border: 0;
  }
}

/* ---------- BASE ---------- */
@layer base {
  @font-face {
    font-family: "Monsterrat";
    src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
    src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
  }

  @font-face {
    font-family: "Varela";
    src: url(../fonts/Varela/Varela-Regular.ttf);
    src: url(../fonts/Varela/Varela-Regular.ttf) format('truetype')
  }

  *:not(:host) {
    font-family: "Varela", Arial, sans-serif;
  }

  :root {
    height: 100vh;
    scrollbar-gutter: stable;
    scrollbar-color:  var(--accent-color) var(--background-color);
  }

  body {
    font-family: "Monsterrat", Arial, sans-serif;
    font-size: var(--step-0);
    width: 100%;
    height: 100%;
    color: var(--text-color, #333);
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--background-secondary);
    overflow-wrap: anywhere;
  }

  main {
    display: flex;
    width: min(100vw, clamp(40rem, 70vw, 60rem));
    height: 100%;
    padding: var(--space-s-m);
    margin: 0 auto;
  }

  hr {
    border-top: 1px solid var(--hr-color);
    margin-bottom: 0px;
  }
  
  img {
    border-radius: var(--border-round-big);
  }

}

/* ---------- THEME ---------- */
@layer theme {

  /* Default (light theme) */
  :root {
    --primary-color: #007bff;
    --background-color: white;
    --background-secondary: #f0f4fa;
    --background-tertiary: #c7e2ff;
    --text-color: #333333;
    --accent-color: #0056b3;
    --error-color: #be0000;
    --hr-color: #97a5b4;
    --border-round-small: 5px;
    --border-round-med: 7px;
    --border-round-big: 12px;
  }

  body:has(#dark-mode:checked) {
    --primary-color: #4b679a;
    --background-color: #101010;
    --background-secondary: #121212;
    --background-tertiary: #1b1b1b;
    --text-color: #e5effb;
    --accent-color: #358be6;
    --logo-color: var(--accent-color);
    --orbit-glow-color: var(--primary-color);
    --hr-color: #37506b;
  }

  body.fun-theme {
    --primary-color: hotpink;
    --background-color: #fff7e6;
    --text-color: #2e1a47;
    --accent-color: orange;
  }

}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* button*/
  button {
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    color: white;
    padding: 10px 15px;
    border-radius: var(--border-round-small);
    border: none;
    font-family: "Varela", Arial, sans-serif;
    font-size: var(--step--1);
    transition: background 0.3s;
  }

  button:focus {
    outline: 3px solid var(--background-tertiary);
    outline-offset: 5px;
  }

  button:hover {
    background: var(--primary-color);
    cursor: pointer;
  }

  button[class="secondary-button"] {
    background-color: transparent;
    color: var(--text-color);
    border: var(--fluid-tiny) solid var(--accent-color)
  }

  button[class="secondary-button"]:hover {
    background-color: var(--background-tertiary);
  }

  a:has(button) {
    text-decoration: none;
  }

  audio {
    background: var(--background-tertiary);
    border-radius: var(--border-round-med);
    overflow: hidden;
  }

  audio::-webkit-media-controls-panel {
    background-color: var(--background-tertiary);
    border-radius: var(--border-round-med)
  }
}

/* View Transition */
@view-transition {
  navigation: auto;
}

form {
  display: flex;
  flex-direction: column;
  width: 60%;
  height: auto;
  margin: 20vh auto;
  padding: var(--space-s);
  gap: var(--space-xs);
  justify-self: center;
  align-self: center;
  border: 1px solid var(--hr-color);
  background-color: var(--background-color);
  background: linear-gradient(var(--background-color), var(--background-secondary));
  border-radius: var(--border-round-med);

  input {
    background-color: var(--background-secondary);
    border: 1px solid var(--hr-color);
    border-radius: var(--border-round-small);
    height: var(--space-m);
    padding: 0.5rem;
  }

  textarea {
    border: 1px solid var(--hr-color);
    border-radius: var(--border-round-small);
    height: 10%;
    padding: 0.5rem;
    resize: none;
  }

  output-area {
    height: 7vh;
    display: flex;
    flex-direction: column;
  }

  form-element {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);

    input:user-invalid {
      border: 2px solid var(--error-color);
      border-spacing: 2px;
    }

    input:user-invalid:focus {
      box-shadow: inset 0 0 0 1px var(--error-color);
    }

    textarea:invalid {
      box-shadow: inset 0 0 0 2px var(--error-color);
    }
  }

  form-element:has(input:optional) label::after {
    content: " (optional)";
  }

  #error-output {
    color: var(--error-color);
  }

  h1 {
    font-size: var(--step-3);
    margin: auto;
  }

  aside {
    color: var(--hr-color);
    margin-top: -.5rem;
  }

  textarea {
    background-color: var(--background-secondary);
  }
}

form button[type="submit"] {
  margin: var(--space-2xs) 0;
}

/* flashing input */
.flashing-input {
  border-color: var(--hr-color);
  animation: flash-border 0.1s alternate 3, shake 0.5s ease-in-out 1;
}

@keyframes flash-border {
  from { border-color: red; }
  to { border-color: var(--hr-color); }
}

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}