/***** BASE COLORS ****/
:root {
  --primary-light:#84A98C;  
  --primary-dark: #354F52;
  --secondary-light: #52796F;  
  --background-color:#EEEFED;  
  --surface-color: #CAD2C5;  
  --secondary-surface: #CAD2C5; 
  --border-color: #CAD2C5; 
  --text-primary:#2F3E46; 
  --text-secondary: white; 
  --header-color: #2F3E46;

  --header-bg: white;
  --card-color: #E7E0DA;

  --chart-legend-box-width: 20px;
  --chart-legend-padding: 15px;
  
  --chart-color-0: #84A98C;
  --chart-color-1: #354F52;
  --chart-color-2: #52796F;
  --chart-color-3: #CAD2C5;
  --chart-color-4: #7ca884;
  --chart-color-5: #6b6b6b;
  --chart-color-6: #2c4a52;
  --chart-color-7: #b5c7bc;

  /* Variables (custom properties) used throughout the stylesheet */
  --max-width: 720px;      /* Maximum width of the form */
  --muted: #6b6b6b;        /* Gray color for secondary text */
  --accent: #7ca884;       /* Green color used for buttons/links */
  --accent-dark: #6b9a77;  /* Slightly darker green for hover state */
  --bg: #ffffff;           /* Page background color */
}

.theme-pink {
  --primary-light: #F5A6C4;
  --primary-dark: #D94F8C;
  --secondary-light: #F1C0D7;
  --background-color: #FFEAF2;  
  --surface-color: #FFD6E8;  
  --secondary-surface: #FFD6E8; 
  --border-color: #FFB0D1; 
  --text-primary: #4A1A3C;
  --text-secondary: white; 
  --header-color: #4A1A3C;

  --header-bg: #FFEAF2;
  --card-color: #FFD6E8;

  --chart-legend-box-width: 20px;
  --chart-legend-padding: 15px;

  --chart-color-0: #F5A6C4;
  --chart-color-1: #D94F8C;
  --chart-color-2: #F1C0D7;
  --chart-color-3: #FFD6E8;
  --chart-color-4: #F48FB1;
  --chart-color-5: #8C4B6D;
  --chart-color-6: #c2185b;
  --chart-color-7: #f8bbd0;

  --max-width: 720px;
  --muted: #8C4B6D;        
  --accent: #F48FB1;       
  --accent-dark: #D94F8C;  
  --bg: #FFEAF2;           
}

.theme-purple {
  --primary-light: #B39DDB;
  --primary-dark: #673AB7;
  --secondary-light: #9575CD;
  --background-color: #F3E5F5;  
  --surface-color: #E1BEE7;  
  --secondary-surface: #E1BEE7; 
  --border-color: #CE93D8; 
  --text-primary: #311B92;
  --text-secondary: white; 
  --header-color: #311B92;

  --header-bg: #F3E5F5;
  --card-color: #E1BEE7;

  --chart-legend-box-width: 20px;
  --chart-legend-padding: 15px;

  --chart-color-0: #B39DDB;
  --chart-color-1: #673AB7;
  --chart-color-2: #9575CD;
  --chart-color-3: #E1BEE7;
  --chart-color-4: #9C27B0;
  --chart-color-5: #7B1FA2;
  --chart-color-6: #4527a0;
  --chart-color-7: #d1c4e9;

  --max-width: 720px;
  --muted: #7B1FA2;        
  --accent: #9C27B0;       
  --accent-dark: #7B1FA2;  
  --bg: #F3E5F5;           
}

.theme-blue {
  --primary-light: #81D4FA;
  --primary-dark: #0288D1;
  --secondary-light: #4FC3F7;
  --background-color: #E1F5FE;  
  --surface-color: #B3E5FC;  
  --secondary-surface: #B3E5FC; 
  --border-color: #81D4FA; 
  --text-primary: #0D47A1;
  --text-secondary: white; 
  --header-color: #0D47A1;

  --header-bg: #E1F5FE;
  --card-color: #B3E5FC;

  --chart-legend-box-width: 20px;
  --chart-legend-padding: 15px;

  --chart-color-0: #81D4FA;
  --chart-color-1: #0288D1;
  --chart-color-2: #4FC3F7;
  --chart-color-3: #B3E5FC;
  --chart-color-4: #29B6F6;
  --chart-color-5: #1565C0;
  --chart-color-6: #01579b;
  --chart-color-7: #b3d9f2;

  --max-width: 720px;
  --muted: #1565C0;        
  --accent: #29B6F6;       
  --accent-dark: #0288D1;  
  --bg: #E1F5FE;           
}

.theme-red {
  --primary-light: #F28B82;
  --primary-dark: #B71C1C;
  --secondary-light: #EF5350;
  --background-color: #FFEBEE;  
  --surface-color: #FFCDD2;  
  --secondary-surface: #FFCDD2; 
  --border-color: #EF9A9A; 
  --text-primary: #880E4F;
  --text-secondary: white; 
  --header-color: #880E4F;

  --header-bg: #FFEBEE;
  --card-color: #FFCDD2;

  --chart-legend-box-width: 20px;
  --chart-legend-padding: 15px;

  --chart-color-0: #F28B82;
  --chart-color-1: #B71C1C;
  --chart-color-2: #EF5350;
  --chart-color-3: #FFCDD2;
  --chart-color-4: #E57373;
  --chart-color-5: #C62828;
  --chart-color-6: #930000;
  --chart-color-7: #ffb3b3;

  --max-width: 720px;
  --muted: #C62828;        
  --accent: #E57373;       
  --accent-dark: #B71C1C;  
  --bg: #FFEBEE;           
}

.theme-orange {
  --primary-light: #FFB74D;
  --primary-dark: #F57C00;
  --secondary-light: #FFA726;
  --background-color: #FFF3E0;  
  --surface-color: #FFE0B2;  
  --secondary-surface: #FFE0B2; 
  --border-color: #FFCC80; 
  --text-primary: #E65100;
  --text-secondary: white; 
  --header-color: #E65100;

  --header-bg: #FFF3E0;
  --card-color: #FFE0B2;

  --chart-legend-box-width: 20px;
  --chart-legend-padding: 15px;

  --chart-color-0: #FFB74D;
  --chart-color-1: #F57C00;
  --chart-color-2: #FFA726;
  --chart-color-3: #FFE0B2;
  --chart-color-4: #FF9800;
  --chart-color-5: #FB8C00;
  --chart-color-6: #c84b00;
  --chart-color-7: #ffd180;

  --max-width: 720px;
  --muted: #FB8C00;        
  --accent: #FF9800;       
  --accent-dark: #F57C00;  
  --bg: #FFF3E0;           
}

/* BASE STYLES */
* {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-primary);
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

}

main {
  flex: 1;
  width: 100%;
  padding: 1em;
  padding-top: 0;
}

h1 {
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: .5em;
}

/* increase main padding for wide screens */
@media screen and (min-width: 600px) {
  main {
    padding: 1em 5em;
  }
}

/* increase main padding for wide screens */
@media screen and (min-width: 1000px) {
  main {
    padding: 1em 10em;
  }
}

/* MONOCHROME FOR PRINTING */
@media print {
  main {
    background-color: white;
    color: black;
  }
}


/* COLOR STYLING */
.secondary-surface {
  background-color: var(--secondary-surface);
}


/* Reusable component styling */
.card {
  background-color: var(--surface-color);
  border-radius: .5em;
  padding: 1em;
  box-shadow: 0 1px 2px var(--text-primary);
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: var(--secondary-light);
  color: white;
  border: none;
  border-radius: .5em;
  padding: .6em 2em;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    transform: scale(1.01);
    background-color: var(--primary-dark);
  }
}

/* Shared todo section styles */
.todo-section {
  display: flex;
  flex-direction: column;
  gap: .3em;
  flex: 1;

  .todo-label {
    font-size: 0.85em;
    font-weight: 600;
  }

  .todo-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .2em;
    font-size: 0.85em;
    background-color: var(--background-color);
    border-radius: .3em;
    padding: .5em .5em;

    li {
      display: flex;
      align-items: center;
      gap: .4em;
    }
  }

  .todo-add-form {
    display: flex;
    gap: .4em;
    align-items: center;
    justify-content: stretch;

    .text-input {
      flex: 1;
      padding: .35em .6em;
      border: 1px solid var(--border-color);
      border-radius: .3em;
      background-color: var(--background-color);
      color: var(--text-dark);
      font-size: 0.85em;
    }

    .todo-add-btn {
      padding: .35em .75em;
      background-color: var(--secondary-light);
      color: white;
      border: none;
      border-radius: .3em;
      font-size: 0.9em;
      cursor: pointer;
      text-align: center;

      &:hover {
        background-color: var(--primary-dark);
      }
    }
  }

  .todo-delete-btn {
    background: none;
    border: none;
    color: var(--secondary-light);
    cursor: pointer;
    font-size: 1em;
    padding: 0 .2em;
    margin-left: auto;
    line-height: 1;

    &:hover {
      color: var(--primary-dark);
    }
  }
}