:root {
--taskflow-navy: #173B67;
--taskflow-teal: #0D9488;
--taskflow-bg: #F4F7FB;
--taskflow-surface: #FFFFFF;
--taskflow-amber: #E8A23A;
--taskflow-red: #D64545;
}
body {
background-color: var(--taskflow-bg);
color: var(--taskflow-navy);
}
.bg-primary { background-color: var(--taskflow-navy); }
.text-primary { color: var(--taskflow-navy); }
.bg-accent { background-color: var(--taskflow-teal); }
.text-accent { color: var(--taskflow-teal); }
.bg-surface { background-color: var(--taskflow-surface); }
.bg-main { background-color: var(--taskflow-bg); }
.text-warning { color: var(--taskflow-amber); }
.text-danger { color: var(--taskflow-red); }
/* Rounded cards and subtle shadows */
.taskflow-card {
background-color: var(--taskflow-surface);
border-radius: 16px;
box-shadow: 0 4px 12px rgba(23, 59, 103, 0.05);
padding: 1.5rem;
border: 1px solid rgba(23, 59, 103, 0.05);
transition: box-shadow 0.2s ease-in-out;
}
.taskflow-card:hover {
box-shadow: 0 8px 24px rgba(23, 59, 103, 0.08);
}
/* Primary action buttons */
.btn-primary {
background-color: var(--taskflow-teal);
color: #ffffff;
border-radius: 12px;
font-weight: 600;
padding: 0.5rem 1rem;
transition: background-color 0.2s;
border: none;
}
.btn-primary:hover {
background-color: #0b7a70;
}
/* Secondary buttons */
.btn-secondary {
background-color: var(--taskflow-surface);
color: var(--taskflow-navy);
border: 1px solid rgba(23, 59, 103, 0.1);
border-radius: 12px;
font-weight: 500;
padding: 0.5rem 1rem;
transition: background-color 0.2s;
}
.btn-secondary:hover {
background-color: var(--taskflow-bg);
}
/* Forms */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
border-radius: 8px;
border: 1px solid rgba(23, 59, 103, 0.15);
background-color: var(--taskflow-surface);
color: var(--taskflow-navy);
padding: 0.5rem 1rem;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--taskflow-teal);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}