/* Friendly themed todo app styles */
:root{
	--bg: #f7f7f9;
	--card: #ffffff;
	--text: #0b1220;
	--muted: #6b7280;
	--accent: #2b90ff;
	--accent-contrast: #ffffff;
	--danger: #ef4444;
	--shadow: 0 6px 18px rgba(12,20,30,0.08);
	--bg-size: cover;
	
}

html[data-theme='dark']{
	--bg:#0e1a16;
	--card:#081223;
	--text:#0c1429;
	--muted:#9aa6b2;
	--accent:#7cc4ff;
	--accent-contrast:#062134;
	--danger:#ff7a7a;
	--shadow: 0 8px 22px rgba(2,6,12,0.6);
}

html[data-theme='dark'] .heading{
     color : #878d92;
}

/* Center the main heading */
.heading{
	text-align:center;
}


html[data-theme='blue']{
	--bg:#eaf6ff;
	--card:#ffffff;
	--text:#052a36;
	--muted:#5b6b73;
	--accent:#0096c7;
	--accent-contrast:#ffffff;
	--danger:#ff6b6b;
	--shadow: 0 6px 18px rgba(2,18,28,0.06);
}

*{box-sizing:border-box}
body{
	font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif;
	background-color: var(--bg);
	color:var(--text);
	margin:0;
	padding:28px;
	display:flex;
	justify-content:center;
}

.app{
	width:100%;
	max-width:640px;
	min-height: 400px;
	background:var(--card);
	padding:22px;
	border-radius:12px;
	box-shadow:var(--shadow);
	background-image: url('background.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--bg-size);
	background-attachment: fixed;
}

/* Dark theme override (placed after .app so it properly overrides defaults) */
html[data-theme='dark'] .app{
    background-image: url('bg.png');
}


.toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:12px
}

.brand{
	font-weight:700;
	display:flex;
	gap:8px;
	align-items:center
}

.brand-text{
	font-size:16px
}

.controls{
	display:flex;
	gap:8px;
	align-items:center;
}
.task-form{
	display:flex;
	gap:8px;
	margin-bottom:16px;
}

#new-task-input{
	flex:1;
	padding:12px 14px;
	border:1px solid rgba(1, 3, 7, 0.06);
	border-radius:10px;
	font-size:15px;
	background:transparent;
	color:var(--text);
	transition:box-shadow .15s, transform .06s;
}

#new-task-date{
	width:150px;
	padding:10px 12px;
	border:1px solid rgba(15,23,42,0.06);
	border-radius:8px;
	font-size:14px;
	background:transparent;
	color:var(--text);
}

#add-btn{
	background:var(--accent);
	color:var(--accent-contrast);
	border:none;
	padding:10px 14px;
	border-radius:10px;
	cursor:pointer;
	font-weight:600;
	box-shadow:0 6px 12px rgba(43,144,255,0.12);
}

.todo-list{
	list-style:none;
	padding:0;
	margin:0;
}

.todo-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 8px;
	border-bottom:1px solid rgba(15,23,42,0.04);
}
.task-text{
	flex:1;
}

.task-text.done{
	color:var(--muted);
	text-decoration:line-through;
}

.delete-btn{
	background:transparent;
	border:1px solid rgba(15,23,42,0.06);
	padding:6px 8px;
	border-radius:8px;
	cursor:pointer;
}

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

.empty{
	color:var(--muted);
	padding:12px;
	text-align:center;
}

.date-header{
	padding:8px 10px;
	background:rgba(0,0,0,0.04);
	border-radius:8px;
	font-weight:700;
	margin-top:12px;
}
.date-tasks{
	list-style:none;
	margin:6px 0 0 0;
	padding:0
}

.date-block .todo-item{
	padding-left:8px
}

/* Focus and hover polish */
input:focus, select:focus, button:focus{
	outline:none;box-shadow:0 4px 14px rgba(43,144,255,0.12);
}
button:hover{
	transform:translateY(-1px);
}
select{
	padding:8px 10px;
	border-radius:8px;
	border:1px solid rgba(15,23,42,0.06);background:transparent;color:var(--text);
}

/* Responsive tweaks */
@media (max-width:520px){
	.task-form{flex-direction:column}
	#new-task-date{width:100%}
	#add-btn{width:100%}
	.controls{gap:6px}
}

/* Font class for Betania Patmos In GDL (applied to H1) */
.betania-patmos-in-gdl-regular {
  font-family: "Betania Patmos In GDL", cursive;
  font-weight: 599;
  font-style: normal;
}