:root{
    /* Colors of text */
    --ink:#1C1720;            /* Principal (almost black) */
    --ink-soft:#4A4353;       /* Secondary (gray-violet) */

    /* Purple palette, from lighter tones (50) to heavier (500) */
    --violet-50:#F4F0FB;
    --violet-100:#E8DFF7;
    --violet-200:#D6C6EE;
    --violet-300:#BFA3E3;
    --violet-400:#9E79D1;
    --violet-500:#7C57B3;
    --violet-600:#57348b;
    --violet-700:#472777;

    --violet-light: #6a00ff;

    --white:#FFFFFF;

    /* Danger state colors (deletion, errors) */
    --danger:#DC3545;
    --danger-bg:#F7E7E9;
    --danger-border: #FFBDBD;

    /* Warning state colors (caution, non-blocking issues) */
    --warning:#E6A700;
    --warning-bg:#FFF8E1;
    --warning-border:#FFE58A;

    /* Validation state colors (success, no errors) */
    --success:#28A745;
    --success-bg:#E6FFF0;
    --success-border:#A3F0C4;

    /* Gradients */
    --linear-violet-500-200: linear-gradient(135deg, var(--violet-500), var(--violet-200));
    --linear-violet-400-200: linear-gradient(135deg, var(--violet-400), var(--violet-200));
    --linear-violet-300-100: linear-gradient(135deg, var(--violet-300), var(--violet-100));
    --linear-violet-200-50: linear-gradient(135deg, var(--violet-200), var(--violet-50));
    --linear-violet-100-50: linear-gradient(135deg, var(--violet-100), var(--violet-50));
    --linear-violet-50-white: linear-gradient(135deg, var(--violet-50), var(--white));
    --linear-violet-100-white: linear-gradient(135deg, var(--violet-100), var(--white));
    


    /* Radius used for various parts of the code : large / medium / small */
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:9px;

    /* box-shadows */
    --shadow-soft:0 10px 30px -12px rgba(28,23,32,0.28);
    --shadow-under-violet:0 0px 5px 1px var(--violet-light);
    --shadow-hard: 0px 2px 4px rgba(28,23,32,0.28);
    --shadow-card:0 18px 40px -16px rgba(89,58,140,0.35);

    /* Polices : "display" used for titles, words in cards, "body", used for else */
    --font-display:'Fraunces', serif;
    --font-body:'Work Sans', sans-serif;

    /* Acceleration curve used in the majority of possible transitions */
    --cubic-bezier:cubic-bezier(.4,0,.2,1);
    --ease-0-3:0.3s ease;
    --ease-0-3-width:width 0.3s ease;

    /* Sizes in percentage */
    --size-perc-0:0%;
    --size-perc-10:10%;
    --size-perc-20:20%;
    --size-perc-30:30%;
    --size-perc-40:40%;
    --size-perc-50:50%;
    --size-perc-60:60%;
    --size-perc-70:70%;
    --size-perc-80:80%;
    --size-perc-90:90%;
    --size-perc-100:100%;

    /* Sizes in rem (1 = 16px) */
    --size-0:0rem;
    --size-0-0625:0.0625rem;
    --size-0-125:0.125rem;
    --size-0-25:0.25rem;
    --size-0-5:0.5rem;
    --size-0-75:0.75rem;
    --size-1:1rem;
    --size-1-25:1.25rem;
    --size-1-5:1.5rem;
    --size-1-75:1.75rem;
    --size-2:2rem;
    --size-2-25:2.25rem;
    --size-2-5:2.5rem;
    --size-2-75:2.75rem;
    --size-3:3rem;
    --size-3-25:3.25rem;
    --size-3-5:3.5rem;
    --size-3-75:3.75rem;
    --size-4:4rem;

    /* Custom rem sizes */
    --size-neg-0-125:-0.125rem;
    --size-1-1:1.1rem;
    --size-75:75rem; 
    --size-31-25:31.25rem; 
    --size-25:25rem;

    /* Custom vh sizes */
    --size-vh-100:100vh;

    /* Custom line heights */
    --size-lh-1-4:1.4;

    /* Custom line spacing */
    --letter-spacing-neg-0-5:-0.5px;

    /* Font weights */
    --weight-1:100;
    --weight-2:200;
    --weight-3:300;
    --weight-4:400;
    --weight-5:500;
    --weight-6:600;
    --weight-7:700;
    --weight-8:800;
    --weight-9:900;
}

* {
    padding: var(--size-0);
    margin: var(--size-0);
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--violet-700);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--size-vh-100);
    color: var(--ink);
    padding: var(--size-1-75);
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: var(--size-0-5);
}

body::-webkit-scrollbar-track {
    background-color: var(--violet-700);
    border-radius: var(--size-0-25);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--violet-500);
    border-radius: var(--size-0-25);
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--violet-400);
}

.container {
    width: var(--size-perc-100);
    max-width: var(--size-75);
    background-color: var(--white);
    padding: var(--size-2);
    border-radius: var(--size-1-75);
    box-shadow: var(--shadow-soft);
    border: solid var(--size-0-125) var(--violet-300);
}

h1 {
    font-family: var(--font-display);
    text-align: center;
    color: var(--violet-700);
    margin-bottom: var(--size-2);
    font-size: var(--size-2-25);
    font-weight: var(--weight-6);
    letter-spacing: var(--letter-spacing-neg-0-5);
}

h2 {
    color: var(--violet-500);
    margin-bottom: var(--size-1);
    font-size: var(--size-1-25);
    font-weight: var(--weight-5);
    font-style: var(--font-display);
}

.balance-container {
    text-align: center;
    margin-bottom: var(--size-2);
    padding: var(--size-1-75);
    background: var(--linear-violet-200-50);
    border-radius: var(--size-1);
    box-shadow: var(--shadow-hard);
}

.balance-container h1 {
    font-size: var(--size-3);
    margin: var(--size-1) var(--size-0);
    
}

.balance-container h2 {
    color: var(--violet-300);
}

#balance {
    background-color: var(--violet-100);
    border-radius: var(--radius-sm);
    font-size: clamp(1.5rem, 8vw, 3rem);
    white-space: nowrap;
}

.summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-1-5);
    margin-top: var(--size-1-5);
}

.high-numbers {
    display: flex;
    flex-direction: column;
}

.main-content {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--size-1-5);
    max-height: 22.5rem;
}

.income,
.expenses {
    background-color: var(--white);
    padding: var(--size-1);
    border-radius: var(--size-1);
    box-shadow: var(--shadow-hard);
    transition: var(--ease-0-3);
    font-family: var(--font-display);
}

.income:hover,
.expenses:hover {
    transform: translateY(var(--size-neg-0-125));
    box-shadow: var(--shadow-soft);
}

.income h3 {
    color: var(--violet-light);
    font-size: var(--size-1);
    font-weight: var(--weight-6);
}

.expenses h3 {
    color: var(--danger);
    font-size: var(--size-1);
    font-weight: var(--weight-6);
}

.income p,
.expenses p {
    color: var(--violet-light);
    font-size: var(--size-1-25);
    font-weight: var(--weight-6);
    margin-top: var(--size-0-5);
}

.expenses p {
    color: var(--danger);
}



.transaction-container {
    height: var(--size-perc-100);
    display: flex;
    flex-direction: column;
    margin-top: var(--size-2);
}

#transaction-list {
    list-style: none;
    max-height: 17rem;
    overflow-y: auto;
    padding-right: var(--size-0-5);
    flex-grow: 1;
    background-color: var(--violet-50);
    padding: var(--size-1);
    border-radius: var(--radius-sm);
    overflow-x: hidden;
}

#transaction-list::-webkit-scrollbar {
    width: var(--size-0-5);
}

#transaction-list::-webkit-scrollbar-track {
    background-color: var(--violet-100);
    border-radius: var(--size-0-25);
}

#transaction-list::-webkit-scrollbar-thumb {
    background-color: var(--violet-300);
    border-radius: var(--size-0-25);
}

#transaction-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--violet-400);
}

.transaction {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-1) var(--size-1-25);
    margin-bottom: var(--size-0-75);
    border-radius: var(--size-0-75);
    background-color: var(--white);
    box-shadow: var(--shadow-hard);
    transition: var(--ease-0-3);
    border: solid var(--size-0-0625);
    animation: slideIn 0.3s ease;
    margin-bottom: var(--size-2);
    gap: var(--size-0-5);
}

@keyframes slideIn {
    from {
        opacity: var(--size-0);
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.transaction:hover {
    transform: translateX(var(--size-0-25));
    box-shadow: var(--shadow-soft);
}

.transaction.income {
    border-color: var(--violet-light);
    background-color: var(--violet-200);
    color: var(--violet-700);
}

.transaction.expense {
    border-color: var(--danger);
    background-color: var(--danger-bg);
    color: var(--danger);
}

.transaction .delete-btn {
    background: none;
    border: none;
    color: var(--violet-700);
    cursor: pointer;
    font-size: var(--size-1-5);
    opacity: 0;
    transition: var(--ease-0-3);
    padding: var(--size-0-25) var(--size-0-5);
    border-radius: var(--size-0-25);
    margin-left: var(--size-0-75);
}

.transaction.expense .delete-btn {
    color: var(--danger);
}

.transaction:hover .delete-btn {
    opacity: 1;
}

.transaction .delete-btn:hover {
    background-color: var(--violet-300);
    color: var(--violet-700);
    transform: scale(1.1);
}

.transaction.expense .delete-btn:hover {
    background-color: var(--danger-border);
    color: var(--danger);
}

.transaction-amount-button {
    display: flex;
    margin-left: var(--size-2);
    flex-direction: row;
    align-items: center;
}

.transaction.income > #transaction-desc {
    background-color: var(--violet-300);
    padding: var(--size-0-5);
    border-radius: var(--radius-sm);
}

.transaction.expense > #transaction-desc {
    background-color: var(--danger-border);
    padding: var(--size-0-5);
    border-radius: var(--radius-sm);
}

.form-container {
    background: var(--linear-violet-100-50);
    padding: var(--size-1-5);
    border-radius: var(--size-1);
    box-shadow: var(--shadow-hard);
    height: var(--size-perc-100);
    display: flex;
    flex-direction: column;
}

.form-container form {
    height: var(--size-perc-100);
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: var(--size-1-25);
}

label {
    display: block;
    margin-bottom: var(--size-0-5);
    color: var(--ink);
    font-weight: var(--weight-5);
}

input {
    width: var(--size-perc-100);
    padding: var(--size-0-75) var(--size-1);
    border: var(--size-0-125) solid var(--violet-100);
    border-radius: var(--size-0-5);
    font-size: var(--size-1);
    transition: var(--ease-0-3);
    background-color: var(--white);
}

input:focus {
    outline: none;
    border-color: var(--violet-400);
    box-shadow: var(--shadow-hard);
}

input:hover {
    border-color: var(--violet-300);
}

small {
    color: var(--violet-400);
    display: block;
    margin-top: var(--size-0-5);
    text-align: center;
}

button[type="submit"] {
    width: var(--size-perc-100);
    padding: var(--size-1);
    background-color: var(--violet-500);
    color: var(--white);
    border: solid var(--size-0-0625) var(--violet-500);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--size-1);
    font-weight: var(--weight-6);
    transition: var(--ease-0-3);
    box-shadow: var(--shadow-hard);
    box-shadow: var(--shadow-under-violet);
    margin-top: var(--size-1);
}

button[type="submit"]:hover {
    background-color: var(--violet-600);
}

button[type="submit"]:active {
    background-color: var(--violet-700);
}

#neg-button {
    height: var(--size-2-25);
    border-radius: var(--radius-sm);
    border: solid var(--size-0-0625) var(--danger);
    background-color: var(--danger-bg);
    color: var(--danger);
    font-weight: var(--weight-6);
    transition: var(--ease-0-3);
    width: var(--size-perc-100);
    margin: var(--size-0-5) var(--size-0);
}

#neg-button:hover {
    background-color: var(--danger);
    border-color: var(--danger);
    cursor: pointer;
    color: var(--white);
}

@media (min-width: 980px) {
    #expense-amount,
    #income-amount {
        font-size: var(--size-1-75);
    }
    
}

@media (max-width: 980px) {
    .container {
        max-width: 40rem;
    }
    
    #balance.balance-high {
        font-size: var(--size-1-75);
    }

    #expense-amount,
    #income-amount {
        font-size: var(--size-1-25);
    }
    
    #income-amount.high-income,
    #expense-amount.high-expense {
        font-size: var(--size-1-5);
    }
}

@media (min-width: 480px) {
    .container {
        max-width: 40rem;
    }
}
    

@media (max-width: 505px) {

    #transaction-list {
        max-width: clamp(10rem, 150vw, 25rem);
    }

    .income,
    .expenses {
        padding: var(--size-1) var(--size-0-5);
        border-radius: var(--size-0-75);
    }

    .income h3,
    .expenses h3 {
        font-size: var(--size-0-75);
    }

    #income-amount,
    #expense-amount {
        font-size: var(--size-0-75);
    }

    #balance.balance-high {
        font-size: var(--size-1-25);
    }

    #income-amount.high-income {
        font-size: var(--size-1);
    }

    #expense-amount.high-expense {
        font-size: var(--size-1);
    }

    li.transaction.income,
    li.transaction.expense {
        flex-direction: column;
        gap: var(--size-0-75);
    }
}

.container-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  z-index: 1000;
  transition: var(--ease-0-3);
}

/* Style the popup content box */
.context-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--violet-50);
  padding: var(--size-1-5);
  border-radius: var(--radius-sm);
  width: 20rem;
  text-align: center;
}

/* Close button styling */
.close-popup-btn {
  position: absolute;
  padding: var(--size-0-25);
  top: var(--size-0-5);
  width: var(--size-2);
  border-radius: var(--radius-sm);
  right: var(--size-1);
  margin-top: var(--size-0-25);
  font-size: var(--size-1-5);
  cursor: pointer;
}   

.close-popup-btn:hover {
    background-color: var(--violet-200);
}