@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')
  }

  * {
    font-family: "Varela", Arial, sans-serif;
  }

  body {
    font-family: "Monsterrat", Arial, sans-serif;
    font-size: var(--step-0);
    width: 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(100%, 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 {
    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(--);
    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;
  }

  dialog#settings-dialog {
    --fade-duration: 0.3s;

    padding: var(--space-m);
    border-radius:var(--border-round-med);
    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--primary-color);
    margin: auto;

    /* opening transition*/
    &[open] {
      translate: 0 0;
      transition: 
      translate var(--fade-duration) ease-in,
      display var(--fade-duration) ease-in allow-discrete;

      @starting-style {
        translate: 100dvw 0;
      }
    }

    /* backdrop transition*/ 
    &::backdrop {
      opacity: 0;
      transition: opacity 0.3s ease-in;
    }

    &[open]::backdrop {
      transition: opacity 0.3 ease-in allow-discrete;    
      opacity: 1;
      
      @starting-style {
        opacity: 0;
      }
    }
  }

  settings-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  #logo {
    color: var(--logo-color)
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    padding: var(--space-2xs);
    width: 100%;
    box-shadow:
    0px 3px 20px rgb(0,0,0,0.2),
    0px 10px 30px  rgb(0,0,0,0.1);

    nav-links a {
      padding: 0 clamp(4px, 50vw ,var(--space-2xs));
      color: var(--text-color);
      text-decoration: none;
    }

    nav-links a:hover {
      text-decoration: underline;
      text-decoration-color: var(--primary-color);
      text-underline-offset: 5px;
    }
  }


  #hamburger, #menu-toggle {
    display: none;
  }

  #side-nav {
    position: fixed;
    display: flex;
    gap: var(--space-m);
    flex-direction: column;
    top: 200px;
    inset: 0 0 0 0;
    width: 80%;
    background: var(--background-color);
    transition: 0.3s;
    padding: 1rem;

    transform: translateX(-100%);

    ul {
      line-height: 2rem;

      li {
        list-style-type: none;
        
      }

      a {
        text-decoration: none;
      }
    }
  }

  #menu-toggle:checked ~ #side-nav {
    transform: translateX(0);
  }

  @media (max-width: 420px) {
    #menu-toggle, #hamburger {
      display: flex;
    }

    #menu-toggle {
      transform: translateY(-100vh)
    }

    nav > :not(aside) {
      display: none;
    }

    nav {
      background-color: transparent;
      box-shadow: 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)
  }

  footer {
    padding: var(--space-xs);
    br{
      margin: none;
    }
  }
}

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

@keyframes slide-out-up {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}

@keyframes slide-in-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0%); }
}

::view-transition-old(root) {
  animation: 0.5s ease-in both slide-out-up;
}

::view-transition-new(root) {
  animation: 0.5s ease-in both slide-in-up;
}

nav {
  view-transition-name: navbar;
  view-transition-group: none;
}