/* ========================================
   CALENDAR THEMES
   Separate theme file for better organization
   ======================================== */

/* =============== ROOT/DEFAULT THEME =============== */
:root {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #1a1a1a;
  --calendar-border: 2px solid #333333;
  --calendar-dates-textColor: #f5f5f5;

  --calendar-month-header-text: #f5f5f5;
  --calendar-header-color: #1a1a1a;

  --calendar-weekdays-header-textColor: #a0a0a0;

  --calendar-event-border: 1.5px solid #f5f5f58c;
  --calendar-reminderDay-highlight-color: rgba(60, 60, 60, 0);

  --calendar-currentDay-textColor: #f5f5f5;
  --calendar-currentDay-highlight-color: #4d4d4d;

  --calendar-days-hover-color: #333333;
  --calendar-event-day-textColor: #f5f5f5;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #4d4d4dd3;
  --event-today-text: #f5f5f5;

  --event-today-date: #e0e0e0;

  --event-today-countdown: #f5f5f5;
  --event-today-countdown-box-shadow: #33333385;
  --event-today-countdown-box-border: 1px solid #f5f5f5;

  --event-today-bg-hover: #5a5a5a;
  --event-today-text-hover: #f5f5f5;
  --event-today-border: 2px solid #f5f5f5;
  --event-lineThrough-todayColor: #f5f5f5;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #f5f5f5;
  --event-lineThrough-all-eventColor: var(--event-lineThrough-todayColor);

  /* ===== thisMonth ===== */
  --this-month-bg: #252525;
  --this-month-text: #f5f5f5;

  --thismonth-date-color: #8a8a8a;

  --thismonth-countdown-color: #f5f5f5;
  --thismoth-countdown-box-shadow: #33333385;
  --thismoth-countdown-box-border: 1px solid #f5f5f5;

  /* ===== isFuture ===== */
  --future-month-bg: #1e1e1e;
  --future-month-text: #f5f5f5;

  --future-date-color: #8a8a8a;

  --future-countdown-color: #f5f5f5;
  --future-countdown-shadow: #33333385;
  --future-countdown-border: 1px solid #f5f5f5;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #fdfdfd;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #181212;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #fdfdfd;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #181212;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #252525;

  --todo-text-color: #d1d1d1;

  --todolist-border: 1.5px solid #888383;

  --todolist-textColor-hover: #f5f5f5;
  --todolist-bgColor-hover: #333333;
  --todolist-border-hover: 1.5px solid #555555;

  --todolist-completed-textColor: #f5f5f5;
  --todolist-complete-bgColor: rgba(40, 40, 40, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #f5f5f5;
  --todo-date-color: #f5f5f5;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #f5f5f5;
  --todo-backBtn-color-hover: var(--nav-arrow-hover-bg);

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #d1d1d1;
  --todo-textInput-bgColor: #252525;
  --todo-textInput-border: 1.5px solid #444444;
  --todo-textInput-borderColor: 1.5px solid #444444;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #f5f5f5;
  --todo-addBtn-bgColor: #4d4d4d;
  --todo-addBtn-border: 1px solid #555555;
  --todo-addBtn-bgColor-hover: #5a5a5a;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #f3f4f6;
  --todo-delete-btn-color: #f94c4cd3;
  --event-delete-btn-color-hover: #4d4d4dd3;

  /* ===== Nav ===== */
  --nav-arrow-color: #b3b3b3;
  --nav-arrow-hover-bg: #585858;
  --nav-arrow-hover-color: #e0e0e0;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: #fff;
  --bio-logo-wrapper-border: 1px solid #fff;

  --logo-color: invert(0%) sepia(81%) saturate(163%) hue-rotate(16deg)
    brightness(97%) contrast(100%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== DARK THEME =============== */
[data-theme="Dark"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #000;
  --calendar-border: 2px solid #333333;
  --calendar-dates-textColor: #b3b3b3;

  --calendar-month-header-text: #e0e0e0;
  --calendar-header-color: #1a1a1a;

  --calendar-weekdays-header-textColor: #a0a0a0;

  --calendar-event-border: 1.5px solid #444444;
  --calendar-reminderDay-highlight-color: rgba(60, 60, 60, 0.5);

  --calendar-currentDay-textColor: #f5f5f5;
  --calendar-currentDay-highlight-color: #4d4d4d;

  --calendar-days-hover-color: #333333;
  --calendar-event-day-textColor: #8a8a8a;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #4d4d4d;
  --event-today-text: #f5f5f5;

  --event-today-date: #e0e0e0;

  --event-today-countdown: #d1d1d1;
  --event-today-countdown-box-shadow: #33333385;
  --event-today-countdown-box-border: 1px solid #555555;

  --event-today-bg-hover: #5a5a5a;
  --event-today-text-hover: #f5f5f5;
  --event-today-border: 2px solid #555555;
  --event-lineThrough-todayColor: #666666;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #444444;
  --event-lineThrough-all-eventColor: var(--event-lineThrough-todayColor);

  /* ===== thisMonth ===== */
  --this-month-bg: #252525;
  --this-month-text: #b3b3b3;

  --thismonth-date-color: #8a8a8a;

  --thismonth-countdown-color: #999999;
  --thismoth-countdown-box-shadow: #33333385;
  --thismoth-countdown-box-border: 1px solid #444444;

  /* ===== isFuture ===== */
  --future-month-bg: #1e1e1e;
  --future-month-text: #a0a0a0;

  --future-date-color: #8a8a8a;

  --future-countdown-color: #8a8a8a;
  --future-countdown-shadow: #33333385;
  --future-countdown-border: 1px solid #444444;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #474747;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #181212;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #474747;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #181212;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #252525;

  --todo-text-color: #d1d1d1;

  --todolist-border: 1.5px solid #444444;

  --todolist-textColor-hover: #f5f5f5;
  --todolist-bgColor-hover: #333333;
  --todolist-border-hover: 1.5px solid #555555;

  --todolist-completed-textColor: #8a8a8a;
  --todolist-complete-bgColor: rgba(40, 40, 40, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #a0a0a0;
  --todo-date-color: #8a8a8a;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #b3b3b3;
  --todo-backBtn-color-hover: var(--nav-arrow-hover-bg);

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #d1d1d1;
  --todo-textInput-bgColor: #252525;
  --todo-textInput-border: 1.5px solid #444444;
  --todo-textInput-borderColor: 1.5px solid #444444;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #f5f5f5;
  --todo-addBtn-bgColor: #4d4d4d;
  --todo-addBtn-border: 1px solid #555555;
  --todo-addBtn-bgColor-hover: #5a5a5a;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #f3f4f6;
  --todo-delete-btn-color: #ff4d4d;
  --event-delete-btn-color-hover: #ff4d4d;

  /* ===== Nav ===== */
  --nav-arrow-color: #b3b3b3;
  --nav-arrow-hover-bg: #333333;
  --nav-arrow-hover-color: #e0e0e0;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: #fff;
  --bio-logo-wrapper-border: 1px solid #fff;

  --logo-color: invert(0%) sepia(81%) saturate(163%) hue-rotate(16deg)
    brightness(97%) contrast(100%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== LIGHT THEME =============== */
[data-theme="light"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #ffffff;
  --calendar-border: 2px solid #000;
  --calendar-dates-textColor: #111111;

  --calendar-month-header-text: #111111;
  --calendar-header-color: #f3f4f6;

  --calendar-weekdays-header-textColor: #0a0a0a8c;

  --calendar-event-border: 1.5px solid #000;
  --calendar-reminderDay-highlight-color: rgba(215, 215, 215, 0.363);

  --calendar-currentDay-textColor: #111111;
  --calendar-currentDay-highlight-color: #fff387;

  --calendar-days-hover-color: #e5e7eb;
  --calendar-event-day-textColor: #111111;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #fff387;
  --event-today-text: #111418;

  --event-today-date: #111418;

  --event-today-countdown: #111418;
  --event-today-countdown-box-shadow: #ffffff85;
  --event-today-countdown-box-border: 1px solid #000;

  --event-today-bg-hover: rgba(253, 245, 185, 0.537);
  --event-today-text-hover: #111418;
  --event-today-border: 2px solid #181212;
  --event-lineThrough-todayColor: #474747;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #181212;
  --event-lineThrough-all-eventColor: var(--event-lineThrough-todayColor);

  /* ===== thisMonth ===== */
  --this-month-bg: #f3f4f6;
  --this-month-text: #111418;

  --thismonth-date-color: #000;

  --thismonth-countdown-color: #000;
  --thismoth-countdown-box-shadow: #ffffff85;
  --thismoth-countdown-box-border: 1px solid #000;

  /* ===== isFuture ===== */
  --future-month-bg: #f3f4f6;
  --future-month-text: #111418;

  --future-date-color: #000;

  --future-countdown-color: #000;
  --future-countdown-shadow: #ffffff85;
  --future-countdown-border: 1px solid #000;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #474747;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #181212;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #474747;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #181212;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #474747;
  --event-today-checkbox-completed-border: 1.5px solid #474747;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #181212;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #474747;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #181212;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: var(--calendar-header-color);

  --todo-text-color: #111418;

  --todolist-border: var(--calendar-event-border);

  --todolist-textColor-hover: var(--todo-text-color);
  --todolist-bgColor-hover: var(--calendar-header-color);
  --todolist-border-hover: var(--calendar-event-border);

  --todolist-completed-textColor: var(--todolist-textColor);
  --todolist-complete-bgColor: var(--todo-completed-bg);

  /* ===== Todo Date ===== */
  --todo-day-color: #111418;
  --todo-date-color: #111418;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #000;
  --todo-backBtn-color-hover: var(--nav-arrow-hover-bg);

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: var(--calendar-dates-textColor);
  --todo-textInput-bgColor: var(--calendar-header-color);
  --todo-textInput-border: var(--calendar-event-border);
  --todo-textInput-borderColor: var(--calendar-event-border);

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: var(--calendar-currentDay-textColor);
  --todo-addBtn-bgColor: var(--calendar-currentDay-highlight-color);
  --todo-addBtn-border: 1px solid #000;
  --todo-addBtn-bgColor-hover: var(--calendar-currentDay-highlight-color);

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #f3f4f6;
  --todo-delete-btn-color: #f95c5c;
  --event-delete-btn-color-hover: #ff2222;

  /* ===== Nav ===== */
  --nav-arrow-color: #4b5563;
  --nav-arrow-hover-bg: #d6d6d6;
  --nav-arrow-hover-color: #1f2937;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: #fff;
  --bio-logo-wrapper-border: 1px solid #000;
  --logo-color: invert(0%) sepia(25%) saturate(5006%) hue-rotate(71deg)
    brightness(73%) contrast(87%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== RED THEME =============== */
[data-theme="red"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #fef2f2;
  --calendar-border: 2px solid #fca5a5;
  --calendar-dates-textColor: #7f1d1d;

  --calendar-month-header-text: #ffffff;
  --calendar-header-color: #dc2626;

  --calendar-weekdays-header-textColor: #991b1b;

  --calendar-event-border: 1.5px solid #dc2626;
  --calendar-reminderDay-highlight-color: #ff000013;

  --calendar-currentDay-textColor: #ffffff;
  --calendar-currentDay-highlight-color: #dc2626;

  --calendar-days-hover-color: #ef4444;
  --calendar-event-day-textColor: #991b1b;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #dc2626;
  --event-today-text: #ffffff;

  --event-today-date: #ffffff;

  --event-today-countdown: #ffffff;
  --event-today-countdown-box-shadow: #ef444485;
  --event-today-countdown-box-border: 1px solid #fca5a5;

  --event-today-bg-hover: #ef4444;
  --event-today-text-hover: #ffffff;
  --event-today-border: 2px solid #fca5a5;
  --event-lineThrough-todayColor: #ffffff;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #dc2626;
  --event-lineThrough-all-eventColor: #7f1d1d;

  /* ===== thisMonth ===== */
  --this-month-bg: #2a2d3a;
  --this-month-text: #7f1d1d;

  --thismonth-date-color: #7f1d1d;

  --thismonth-countdown-color: #7f1d1d;
  --thismoth-countdown-box-shadow: #fe3e3e00;
  --thismoth-countdown-box-border: 1px solid #7f1d1d;

  /* ===== isFuture ===== */
  --future-month-bg: #fef2f2;
  --future-month-text: #7f1d1d;

  --future-date-color: #7f1d1d;

  --future-countdown-color: #991b1b;
  --future-countdown-shadow: #ef444411;
  --future-countdown-border: 1px solid #7f1d1d;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #ffffff;
  --event-today-checkbox-completed-border: 1.5px solid #ffffff;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #181212;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #dc2626;
  --eventOther-checkbox-completed-bg: #dc2626;
  --eventOther-checkbox-sign-color: #ffffff;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #fef2f2;

  --todo-text-color: #7f1d1d;

  --todolist-border: 1.5px solid #ef7c7c;

  --todolist-textColor-hover: #7f1d1d;
  --todolist-bgColor-hover: #fecaca;
  --todolist-border-hover: 1.5px solid #ef4444;

  --todolist-completed-textColor: #7f1d1d;
  --todolist-complete-bgColor: rgba(254, 202, 202, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #7f1d1d;
  --todo-date-color: #7f1d1d;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #7f1d1d;
  --todo-backBtn-color-hover: #ef444447;

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #7f1d1d;
  --todo-textInput-bgColor: #fef2f2;
  --todo-textInput-border: 1.5px solid #fca5a5;
  --todo-textInput-borderColor: 1.5px solid #fca5a5;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #ffffff;
  --todo-addBtn-bgColor: #dc2626;
  --todo-addBtn-border: 1px solid #fca5a5;
  --todo-addBtn-bgColor-hover: #ef4444;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #f3f4f6;
  --todo-delete-btn-color: #df3737;
  --event-delete-btn-color-hover: #dc2626;

  /* ===== Nav ===== */
  --nav-arrow-color: #fef2f2;
  --nav-arrow-hover-bg: #ef4444;
  --nav-arrow-hover-color: #fef2f2;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: transparent;
  --bio-logo-wrapper-border: 1px solid var(--calendar-dates-textColor);
  --logo-color: invert(17%) sepia(23%) saturate(6085%) hue-rotate(339deg)
    brightness(89%) contrast(100%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== BLUE THEME =============== */
[data-theme="blue"] {
  /* =============== CALENDAR =============== */
  --calendar-dates-textColor: #1e3a8a;
  --calendar-bg-color: #eff6ff;

  --calendar-month-header-text: #ffffff;
  --calendar-header-color: #1e52ff;

  --calendar-weekdays-header-textColor: #335ac7d8;

  --calendar-event-border: 1.5px solid #2563eb;
  --calendar-reminderDay-highlight-color: rgba(237, 236, 251, 0.361);

  --calendar-currentDay-textColor: #ffffff;
  --calendar-currentDay-highlight-color: #2563eb;

  --calendar-border: 2px solid #93c5fd;
  --calendar-days-hover-color: #b6d0fa;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-text: #ffffff;
  --event-today-bg: #2563eb;

  --event-today-date: #ffffff;

  --event-today-countdown: #ffffff;
  --event-today-countdown-box-shadow: #3b82f685;
  --event-today-countdown-box-border: 1px solid #93c5fd;

  --event-today-bg-hover: #3b82f6;
  --event-today-text-hover: #ffffff;
  --event-today-border: 2px solid #1e52ff;
  --event-lineThrough-todayColor: #ffffff;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #1e52ff;
  --event-lineThrough-all-eventColor: #335ac7;

  /* ===== thisMonth ===== */
  --this-month-text: #335ac7;
  --this-month-bg: #2a2d3a;

  --thismonth-date-color: #335ac7;

  --thismonth-countdown-color: #335ac7;
  --thismoth-countdown-box-shadow: ;
  --thismoth-countdown-box-border: 1px solid #335ac7;

  /* ===== isFuture ===== */
  --future-month-text: #335ac7;
  --future-month-bg: #eff6ff;

  --future-date-color: #335ac7;

  --future-countdown-color: #335ac7;
  --future-countdown-shadow: ;
  --future-countdown-border: 1px solid #335ac7;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #fdfdfd;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #2563eb;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #2563eb;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #2563eb;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #eff6ff;

  --todo-text-color: #1e3a8a;

  --todolist-border: 1.5px solid #93c5fd;

  --todolist-textColor-hover: #1e3a8a;
  --todolist-bgColor-hover: #bfdbfe;
  --todolist-border-hover: 1.5px solid #3b82f6;

  --todolist-completed-textColor: #1e3a8a;
  --todolist-complete-bgColor: rgba(191, 219, 254, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #1e3a8a;
  --todo-date-color: #1e3a8a;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #1e3a8a;
  --todo-backBtn-color-hover: #d3dfff72;

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #1e3a8a;
  --todo-textInput-bgColor: #eff6ff;
  --todo-textInput-border: 1px solid;
  --todo-textInput-borderColor: 1.5px solid #93c5fd;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #ffffff;
  --todo-addBtn-bgColor: #2563eb;
  --todo-addBtn-border: 1px solid #93c5fd;
  --todo-addBtn-bgColor-hover: #3b82f6;

  /* ===== Delete ===== */
  --todo-delete-btn-textColor: #fff5fa;
  --todo-delete-btn-color: #ff6fa1;
  --event-delete-btn-color-hover: #ff6fa1;

  /* ===== Nav ===== */
  --nav-arrow-color: #eff6ff;
  --nav-arrow-hover-bg: #3b82f6;
  --nav-arrow-hover-color: #eff6ff;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: transparent;
  --bio-logo-wrapper-border: 1px solid var(--calendar-dates-textColor);
  --logo-color: invert(17%) sepia(100%) saturate(1322%) hue-rotate(209deg)
    brightness(91%) contrast(97%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== GREEN THEME =============== */
[data-theme="green"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #f0fdf4;
  --calendar-border: 2px solid #86efac;
  --calendar-dates-textColor: #14532d;

  --calendar-month-header-text: #ffffff;
  --calendar-header-color: #166534;

  --calendar-weekdays-header-textColor: #15803d;

  --calendar-event-border: 1.5px solid #1f9249;
  --calendar-reminderDay-highlight-color: #c3ffd987;

  --calendar-currentDay-textColor: #ffffff;
  --calendar-currentDay-highlight-color: #1f9249;

  --calendar-days-hover-color: #9cfdc0d8;
  --calendar-event-day-textColor: #15803d;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #1f9249;
  --event-today-text: #ffffff;

  --event-today-date: #ffffff;

  --event-today-countdown: #ffffff;
  --event-today-countdown-box-shadow: #22c55e85;
  --event-today-countdown-box-border: 1px solid #86efac;

  --event-today-bg-hover: #22c55e;
  --event-today-text-hover: #ffffff;
  --event-today-border: 2px solid #86efac;
  --event-lineThrough-todayColor: #f0fdf4;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #1f9249;
  --event-lineThrough-all-eventColor: #1f9249;

  /* ===== thisMonth ===== */
  --this-month-bg: #2a2d3a;
  --this-month-text: #1f9249;

  --thismonth-date-color: #1f9249;

  --thismonth-countdown-color: #1f9249;
  --thismoth-countdown-box-shadow: #86efad05;
  --thismoth-countdown-box-border: 1px solid #1f9249;

  /* ===== isFuture ===== */
  --future-month-bg: #f0fdf4;
  --future-month-text: #1f9249;

  --future-date-color: #1f9249;

  --future-countdown-color: #1f9249;
  --future-countdown-shadow: #86efac85;
  --future-countdown-border: 1px solid #1f9249;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #fdfdfd;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #1f9249;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #1f9249;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #1f9249;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #f0fdf4;

  --todo-text-color: #14532d;

  --todolist-border: 1.5px solid #1fa951;

  --todolist-textColor-hover: #14532d;
  --todolist-bgColor-hover: #86efac;
  --todolist-border-hover: 1.5px solid #22c55e;

  --todolist-completed-textColor: #14532d;
  --todolist-complete-bgColor: rgba(134, 239, 172, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #1f9249;
  --todo-date-color: #1f9249;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #14532d;
  --todo-backBtn-color-hover: #24e4713e;

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #1f9249;
  --todo-textInput-bgColor: #f0fdf4;
  --todo-textInput-border: 1px solid;
  --todo-textInput-borderColor: 1.5px solid #86efac;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #ffffff;
  --todo-addBtn-bgColor: #1f9249;
  --todo-addBtn-border: 1px solid #86efac;
  --todo-addBtn-bgColor-hover: #1f9249;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #f3f4f6;
  --todo-delete-btn-color: #fb6464;
  --event-delete-btn-color-hover: #16a34a;

  /* ===== Nav ===== */
  --nav-arrow-color: #dcfce7;
  --nav-arrow-hover-bg: #15803d;
  --nav-arrow-hover-color: #dcfce7;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: transparent;
  --bio-logo-wrapper-border: 1px solid var(--calendar-dates-textColor);
  --logo-color: invert(19%) sepia(11%) saturate(6574%) hue-rotate(109deg)
    brightness(101%) contrast(84%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== YELLOW THEME =============== */
[data-theme="yellow"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #fdf8dd;
  --calendar-border: 2px solid #cac6b8;
  --calendar-dates-textColor: #5a3921;

  --calendar-month-header-text: #5a3921;
  --calendar-header-color: #ffde59;

  --calendar-weekdays-header-textColor: #8c6a56;

  --calendar-event-border: 1.5px solid #5a3921;
  --calendar-reminderDay-highlight-color: #fbf4d7;

  --calendar-currentDay-textColor: #8c6a56;
  --calendar-currentDay-highlight-color: #ffde59;

  --calendar-days-hover-color: #ffde5989;
  --calendar-event-day-textColor: #8c6a56;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #ffde59;
  --event-today-text: #5a3921;

  --event-today-date: #5a3921;

  --event-today-countdown: #5a3921;
  --event-today-countdown-box-shadow: #f8f8e3;
  --event-today-countdown-box-border: 1px solid #5a3921;

  --event-today-bg-hover: #ffde598a;
  --event-today-text-hover: #5a3921;
  --event-today-border: 2px solid #cac6b8;
  --event-lineThrough-todayColor: #5a3921;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #cac6b8;
  --event-lineThrough-all-eventColor: var(--event-lineThrough-todayColor);

  /* ===== thisMonth ===== */
  --this-month-bg: #2a2d3a;
  --this-month-text: #5a3921;

  --thismonth-date-color: #5a3921;

  --thismonth-countdown-color: #5a3921;
  --thismoth-countdown-box-shadow: #f8f8e3;
  --thismoth-countdown-box-border: 1px solid #3a3d4a;

  /* ===== isFuture ===== */
  --future-month-bg: #fdf8dd;
  --future-month-text: #5a3921;

  --future-date-color: #5a3921;

  --future-countdown-color: #5a3921;
  --future-countdown-shadow: #f8f8e3;
  --future-countdown-border: 1px solid #3a3d4a;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #5a3921;
  --event-today-checkbox-completed-border: 1.5px solid #5a3921;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #5a3921;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #474747;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #5a3921;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #fdf8dd;

  --todo-text-color: #5a3921;

  --todolist-border: 1.5px solid #978d67;

  --todolist-textColor-hover: #5a3921;
  --todolist-bgColor-hover: #ffe680;
  --todolist-border-hover: 1.5px solid #ffacb7;

  --todolist-completed-textColor: #5a3921;
  --todolist-complete-bgColor: rgba(255, 230, 128, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #5a3921;
  --todo-date-color: #5a3921;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #5a3921;
  --todo-backBtn-color-hover: var(--nav-arrow-hover-bg);

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #5a3921;
  --todo-textInput-bgColor: #fdf8dd;
  --todo-textInput-border: 1.5px solid #cac6b8;
  --todo-textInput-borderColor: 1.5px solid #cac6b8;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #5a3921;
  --todo-addBtn-bgColor: #ffde59;
  --todo-addBtn-border: 1px solid #cac6b8;
  --todo-addBtn-bgColor-hover: #ffde59;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #f3f4f6;
  --todo-delete-btn-color: #ff5f5f;
  --event-delete-btn-color-hover: #ff8fab;

  /* ===== Nav ===== */
  --nav-arrow-color: #5a3921;
  --nav-arrow-hover-bg: #ffed9e;
  --nav-arrow-hover-color: #5a3921;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: transparent;
  --bio-logo-wrapper-border: 1px solid var(--calendar-dates-textColor);
  --logo-color: invert(20%) sepia(85%) saturate(345%) hue-rotate(344deg)
    brightness(93%) contrast(92%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== BUBBLEGUM THEME =============== */
[data-theme="bubblegum"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #fff5fa;
  --calendar-border: 2px solid #fdfdfd;
  --calendar-dates-textColor: #e95293;

  --calendar-month-header-text: #ffffff;
  --calendar-header-color: #ff4da6;

  --calendar-weekdays-header-textColor: #f774be;

  --calendar-event-border: 1.5px solid #e95293;
  --calendar-reminderDay-highlight-color: #fdd4ea2d;

  --calendar-currentDay-textColor: #f5f3f3;
  --calendar-currentDay-highlight-color: #ff4da6;

  --calendar-days-hover-color: #ff90cb75;
  --calendar-event-day-textColor: #e95293;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #ff4da6;
  --event-today-text: #ffffff;

  --event-today-date: #ffffff;

  --event-today-countdown: #ffffff;
  --event-today-countdown-box-shadow: #ff8ac985;
  --event-today-countdown-box-border: 1px solid #fbb6d2;

  --event-today-bg-hover: #ff8ac9;
  --event-today-text-hover: #ffffff;
  --event-today-border: 2px solid #ff4da6;
  --event-lineThrough-todayColor: #fdfdfd;

  /* ===== Event Misc ===== */
  --event-border: 2px solid;
  --event-lineThrough-all-eventColor: #e95293;

  /* ===== thisMonth ===== */
  --this-month-bg: #fff5fa;
  --this-month-text: #d94f8a;

  --thismonth-date-color: #d94f8a;

  --thismonth-countdown-color: #ff4da6;
  --thismoth-countdown-box-shadow: transparent;
  --thismoth-countdown-box-border: 1px solid #ff4da6;

  /* ===== isFuture ===== */
  --future-month-bg: #fff5fa;
  --future-month-text: #d94f8a;

  --future-date-color: #d94f8a;

  --future-countdown-color: #ff4da6;
  --future-countdown-shadow: #fbb6d2;
  --future-countdown-border: 1px solid #ff4da6;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #fdfdfd;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #ff4da6;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #ff4da6;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #ff4da6;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #fff5fa;

  --todo-text-color: #e95293;

  --todolist-border: 1.5px solid #bd6286;

  --todolist-textColor-hover: #e95293;
  --todolist-bgColor-hover: #ffd6e9;
  --todolist-border-hover: 1.5px solid #ff8ac9;

  --todolist-completed-textColor: #ff4da6;
  --todolist-complete-bgColor: rgba(255, 214, 233, 0.6);

  /* ===== Todo Date ===== */
  --todo-day-color: #e95293;
  --todo-date-color: #e95293;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #e95293;
  --todo-backBtn-color-hover: rgba(255, 73, 164, 0.208);

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #e95293;
  --todo-textInput-bgColor: #fff5fa;
  --todo-textInput-border: 1px solid;
  --todo-textInput-borderColor: 1.5px solid #fbb6d2;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #fff5fa;
  --todo-addBtn-bgColor: #ff6fa1;
  --todo-addBtn-border: 1px solid;
  --todo-addBtn-bgColor-hover: #ff6fa1;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #fff5fa;
  --todo-delete-btn-color: #ff6fa1;
  --event-delete-btn-color-hover: #ff6fa1;

  /* ===== Nav ===== */
  --nav-arrow-color: #fff5fb;
  --nav-arrow-hover-bg: #fff5fb;
  --nav-arrow-hover-color: #ffb3e0;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: transparent;
  --bio-logo-wrapper-border: 1px solid var(--calendar-dates-textColor);
  --logo-color: invert(60%) sepia(96%) saturate(3614%) hue-rotate(304deg)
    brightness(94%) contrast(94%);
  --icons-svg-color: var(--calendar-dates-textColor);
}

/* =============== HACKER THEME =============== */
[data-theme="hacker"] {
  /* =============== CALENDAR =============== */
  --calendar-bg-color: #000000;
  --calendar-border: 2px solid #003300;
  --calendar-dates-textColor: #00ff41;

  --calendar-month-header-text: #021c1a;
  --calendar-header-color: #00ff00;

  --calendar-weekdays-header-textColor: #00cc33;

  --calendar-event-border: 1.5px solid #00ff00;
  --calendar-reminderDay-highlight-color: #65ff6532;

  --calendar-currentDay-textColor: #000000;
  --calendar-currentDay-highlight-color: #00ff00;

  --calendar-days-hover-color: #39ff14;
  --calendar-event-day-textColor: #00ff41;

  /* =============== EVENTS =============== */
  /* ===== isToday ===== */
  --event-today-bg: #00ff00;
  --event-today-text: #021c1a;

  --event-today-date: #021c1a;

  --event-today-countdown: #021c1a;
  --event-today-countdown-box-shadow: #39ff1485;
  --event-today-countdown-box-border: 1px solid #003300;

  --event-today-bg-hover: #39ff14;
  --event-today-text-hover: #021c1a;
  --event-today-border: 2px solid #00ff00;
  --event-lineThrough-todayColor: #021c1a;

  /* ===== Event Misc ===== */
  --event-border: 2px solid #00ff008f;
  --event-lineThrough-all-eventColor: #00ff00;

  /* ===== thisMonth ===== */
  --this-month-bg: #2a2d3a;
  --this-month-text: #00ff00;

  --thismonth-date-color: #00ff00;

  --thismonth-countdown-color: #00ff00;
  --thismoth-countdown-box-shadow: #00ff003a;
  --thismoth-countdown-box-border: 1px solid #00ff00;

  /* ===== isFuture ===== */
  --future-month-bg: #000000;
  --future-month-text: #00ff00;

  --future-date-color: #00ff00;

  --future-countdown-color: #00ff00;
  --future-countdown-shadow: #00ff003a;
  --future-countdown-border: 1px solid #00ff00;

  /* =============== Event Checkbox =============== */
  /* ===== Today Checkbox ===== */
  --event-today-checkbox-border: 1.5px solid #474747;
  --event-today-checkbox-completed-border: 1.5px solid #fdfdfd;
  --event-checkbox-completed-bg: #fdfdfd;
  --event-checkbox-sign-color: #181212;

  /* ===== Other Event Checkbox ===== */
  --eventOther-checkbox-border: 1.5px solid #00ff00;
  --eventOther-checkbox-completed-bg: #fdfdfd;
  --eventOther-checkbox-sign-color: #181212;

  /* =============== TODO LIST =============== */
  /* ===== Tasks ===== */
  --todo-page-bgColor: #000000;

  --todo-text-color: #00ff41;

  --todolist-border: 1.5px solid #00ff00;

  --todolist-textColor-hover: #00ff41;
  --todolist-bgColor-hover: ;
  --todolist-border-hover: 1.5px solid #39ff14;

  --todolist-completed-textColor: #00cc33;
  --todolist-complete-bgColor: rgba(0, 255, 0, 0.1);

  /* ===== Todo Date ===== */
  --todo-day-color: #00ff41;
  --todo-date-color: #00ff41;

  /* ===== Back Button ===== */
  --todo-backBtn-color: #00ff41;
  --todo-backBtn-color-hover: #65ff6532;

  /* ===== Text Input Box ===== */
  --todo-textInput-textColor: #00ff41;
  --todo-textInput-bgColor: #000000;
  --todo-textInput-border: 1.5px solid #00ff00;
  --todo-textInput-borderColor: 1.5px solid #003300;

  /* ===== Tasks Adding Button ===== */
  --todo-addBtn-textColor: #021c1a;
  --todo-addBtn-bgColor: #00ff00;
  --todo-addBtn-border: 1px solid #003300;
  --todo-addBtn-bgColor-hover: #39ff14;

  /* ===== Misc ===== */
  --todo-delete-btn-textColor: #000000;
  --todo-delete-btn-color: #00ff00;
  --event-delete-btn-color-hover: #ff0040;

  /* ===== Nav ===== */
  --nav-arrow-color: #021c1a;
  --nav-arrow-hover-bg: #021c1a50;
  --nav-arrow-hover-color: #021c1a;

  /* ===== MISC ===== */
  --bio-logo-wrapper-bg: var(--calendar-dates-textColor);
  --bio-logo-wrapper-border: 1px solid var(--calendar-dates-textColor);
  --logo-color: invert(0%) sepia(81%) saturate(163%) hue-rotate(16deg)
    brightness(97%) contrast(100%);
  --icons-svg-color: var(--calendar-dates-textColor);
}