@font-face {
    font-family: "Josefin Sans";
    src: url(../../assets/JosefinSans-VariableFont_wght.woff2) format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

:root {
  /* Primary */
  --blue-500: hsl(220, 98%, 61%);
  --check-bg: linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%));

  /* gradient border */
  --gradient-border: hsl(192, 100%, 67%), hsl(280, 87%, 65%);
  /* Light Theme */
  --white-black: hsl(0, 0%, 100%); 
  --black-white: hsl(235, 24%, 19%); 
  --bg-primary: hsl(0, 0%, 98%);        /* Fondo principal (gray-50) */
  --bg-secondary: hsl(233, 11%, 84%);   /* Fondo secundario (gray-300) */
  --text-primary: hsl(235, 19%, 35%);   /* Texto principal (navy-850) */
  --text-secondary: hsl(236, 9%, 61%);  /* Texto secundario (gray-600-light) */
  --border: hsla(237, 9%, 61%, 0.456);  /* Texto secundario (gray-600-light) */
  --accent: hsl(234, 39%, 85%);         /* Color de acento (purple-300-light) */
  --shadow: hsl(234, 39%, 85%);         /* Color de acento (purple-300-light) */
  --bg-image-url: url('../../images/bg-desktop-light.jpg');

  /* font size */
  --fs-input: 0.90rem;
  --fs-xs: 0.75rem; 
  --fs-lg: 1rem;  /* 22.5px */
  --fs-xl: 1.5rem;  /* 22.5px */
  --fs-xxl: 2rem;   

   /* font weight */
  
  --fw-400: 400;
  --fw-700: 700;

  /* padding */
  --px: 20px;
  --py: 20px;

  /* margin */
  --mt: 55px;

  /*transition values*/
  --scale: 0.2s
}

/* Dark Theme */
[data-theme="dark"] {
  --white-black: hsl(235, 24%, 19%);
  --black-white: hsl(0, 0%, 100%);
  --bg-primary: hsl(235, 21%, 11%);     /* Fondo principal (navy-950) */
  --bg-secondary: hsl(235, 24%, 19%);   /* Fondo secundario (navy-900) */
  --text-primary: hsl(234, 39%, 85%);    /* Texto principal (gray-600-dark) */
  --text-secondary: hsl(233, 14%, 35%); /* Texto secundario (purple-700) */
  --accent: hsl(233, 14%, 35%);
  /* --accent: hsl(234, 39%, 85%); */
  --shadow: hsl(240, 20%, 3%);
  --accent-hover: hsl(236, 33%, 92%);   /* Hover para botones o links (purple-100-hover) */
  --accent-dark: hsl(235, 16%, 43%);    /* Variante de acento más oscuro (purple-600) */
  --accent-darker: hsl(237, 14%, 26%);  /* Variante de acento aún más oscuro (purple-800) */
  --bg-image-url: url('../../images/bg-desktop-dark.jpg');
}

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

    h1,
    h3,
    h3{
       margin: 0;
    }

    button,label{
        display: block;
    }

    img{
        display: block;
        max-width: 100%;
    }

    html{
        font-size: 18px;
    }

    button,
    input{
        border: none;
        background-color: transparent;
    }

    button{
        cursor: pointer;
    }

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

}

@layer base{
      .label-hidden{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    input[type="checkbox"]{
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    html{
        font-family: Josefin Sans, sans-serif;
        color: var(--text-primary);
    }

    body{
        background-color: var(--bg-primary);
        transition: background-color 300ms ease;
    }

    input::placeholder,
    button, 
    input{
        font-family: Josefin Sans, sans-serif;
    }

    h1{
        color: white;
        font-size: var(--fs-xl);
        letter-spacing: 15px;
    }

    li,
    input{
        color: var(--text-primary);
    }

    

    .todo-text,
    .items-counter,
    .btn-clear-completed{
        line-height: 0;
        font-size: var(--fs-xs);
    }

    input::placeholder,
    input{
        font-size: var(--fs-input);
    }

    /* .todo-list,
    .todo-form{
        background-color: var(--white-black);
    } */

    .state-buttons button{
        font-size: var(--fs-lg);
        color: var(--text-secondary);
        font-weight: var(--fw-700);
    }

    .state-buttons button:hover{
        color: var(--text-primary);
    }

    .state-buttons .selected-btn{
        color: var(--blue-500);
    }

    .instructions p{
        font-size: var(--fs-lg);
        color: var(--text-secondary);
    }

    .items-counter,
    .btn-clear-completed,
    input::placeholder{
        color: var(--text-secondary);
    }

    .round{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 0.5px solid var(--accent);
        cursor: pointer;
    }

    .round-hoverable:hover{
        border: 1.6px solid transparent;
        background: linear-gradient(var(--white-black) 0 0) padding-box,
        linear-gradient(120deg, var(--gradient-border)) border-box;
    }

    .div-footer{
        padding: var(--px) var(--py);
    }

    .empty-list{
        display: flex; 
        justify-content: center;
        align-items: center;
        color: var(--text-secondary);
    }

    @media (min-width: 590px){
        h1{
            font-size: var(--fs-xxl);
        }

        input::placeholder,
        .todo-text,
        .items-counter,
        .btn-clear-completed,
        input{
            font-size: var(--fs-lg);
        }
    }
    
    .todo-text{
        transition: color var(--scale) ease;
    }

    .completed{
        color: var(--accent);
        text-decoration: line-through;
        text-decoration-thickness: 1px;  
        text-decoration-skip-ink: none;  
    }

    .round-check{
        background: linear-gradient(to bottom right, var(--gradient-border));
    }
}

@layer layout{
    .bg-image{
        position: fixed;
        top: 0;
        left: 0;
        background-image: var(--bg-image-url);
        height: 37vh;
        width: 100vw;
        z-index: -1;
        background-size: cover;
        background-position: center;
    }

    main{
        margin: 30px auto;
        padding: 50px 20px;
        max-width: 700px;
    }

    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    form{
        display: flex;
        align-items: center;
        background-color: var(--white-black);
        margin-top: var(--mt);
        background-color: var(--white-black);
        padding: 10px 0px 10px var(--py);
    }

    .round{
        margin-right: 10px;
    }
    
    input{
        padding-left: 10px;
    }

    form input{
        flex: 1;
        height: 40px;
    }

    form input:focus-visible {
        outline: 1px dashed var(--text-primary);
    }

    .todo-list{
        background-color: var(--white-black);
    }

    .interactive-content{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .interactive-content > *{
        border-radius: 5px;
        background-color: var(--white-black);
        overflow: hidden;
    }

    .interactive-content > *{
        box-shadow: 0px 5px 30px -10px var(--shadow);
    }

    .label-li{
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        margin-right: 20px;
        cursor: grab;
    }

    li{
        cursor: pointer;
    }

    ul li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: var(--py);
    }

    ul li,
    .empty-list{
        border-bottom: 0.5px solid var(--border);
    }

    .custom-check{
        position: relative;
    }

    .check-svg {
        position: absolute; /* el svg se posiciona respecto al span */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* lo centra */
        display: none;
    }


    .todo-summary{
        display: flex;
        justify-content: space-between;
        padding: var(--px) var(--py);
        align-items: center;
    } 

    .state-buttons{
        display: flex;
        justify-content: center;
        gap: 10px;
        /* padding: var(--px) var(--py); */
    }

    .instructions{
        margin-top: var(--mt);
        text-align: center;
    }

    .btn-theme{
        position: relative;
        width: 40px;
        height: 40px;
        transition: scale var(--scale) ease;
    }

    .btn-theme:hover{
        scale: 1.1;
    }

    header{
        position: relative;
    }

    .btn-theme svg{
        position: absolute;
        left: 50%;
        transition: top 0.4s ease,
            opacity 0.4s ease;
    }

    .dark-theme-svg,
    .light-theme-svg{        
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    .btn-theme svg.hide-above{
        top: -10px;
        opacity: 0;
        pointer-events: none;
    }

    .btn-theme svg.move-down{
        top: 40px;
        opacity: 0;
    }

    .empty-list{
        height: 200px;
    }

    .delete{
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .delete-dark:hover{
        --accent: hsl(240, 20%, 92%); 
    }

    .delete:hover{
        --accent: hsl(240, 7%, 60%); 
    }

    .add-item-btn{
        width: 60px;
    }

    .add-item-btn svg{
        stroke: var(--text-primary);
        transition: scale var(--scale) ease;
    }

    .add-item-btn:hover svg{
        stroke: var(--text-primary);
        scale: 1.1;
    }

    .hide{
        display: none;
    }

    .show{
        display: flex;
    }
}