:root {
  --color-primary: #0054A6;
  --color-primary-hover: #004282;
  --color-primary-active: #003161;
  --color-primary-subtle: #E9F0F9;
  --color-primary-ring: rgba(0, 84, 166, 0.18);

  --color-teal: #0CA678;
  --color-teal-hover: #08916A;
  --color-teal-subtle: #E7F6F2;

  --color-coral: #4299E1;
  --color-coral-hover: #2F89D3;
  --color-coral-subtle: #ECF5FC;

  --color-success: #2FB344;
  --color-success-subtle: #EAF7EC;
  --color-danger: #D63939;
  --color-danger-hover: #BE3232;
  --color-danger-subtle: #FBEBEB;
  --color-warning: #F59F00;
  --color-warning-subtle: #FEF5E6;

  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;

  --text-primary: #0F172A;
  --text-muted: #49566C;
  --text-subtle: #6C7A91;
  --text-placeholder: #9BA9BE;
  --text-inverse: #FFFFFF;

  --border: rgba(200, 211, 225, 0.82);
  --border-strong: rgba(108, 122, 145, 0.22);
  --border-focus: rgba(0, 84, 166, 0.18);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.1), 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-primary: 0 8px 24px rgba(0, 84, 166, 0.18);
  --shadow-teal: 0 8px 24px rgba(12, 166, 120, 0.16);

  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --sidebar-border: rgba(200, 211, 225, 0.82);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

[data-theme="dark"] {
  --color-primary: #4299E1;
  --color-primary-hover: #61A9E6;
  --color-primary-active: #2F89D3;
  --color-primary-subtle: rgba(66, 153, 225, 0.14);
  --color-primary-ring: rgba(66, 153, 225, 0.22);

  --color-teal: #20C997;
  --color-teal-hover: #3AD1A5;
  --color-teal-subtle: rgba(32, 201, 151, 0.14);

  --color-coral: #74B6EC;
  --color-coral-hover: #8BC2EF;
  --color-coral-subtle: rgba(116, 182, 236, 0.16);

  --color-success: #5ECA75;
  --color-success-subtle: rgba(94, 202, 117, 0.16);
  --color-danger: #F36A6A;
  --color-danger-hover: #F58282;
  --color-danger-subtle: rgba(243, 106, 106, 0.16);
  --color-warning: #FFB648;
  --color-warning-subtle: rgba(255, 182, 72, 0.16);

  --bg: #0F172A;
  --surface: #1D273B;
  --surface-2: #313C52;
  --surface-3: #49566C;

  --text-primary: #F8FAFC;
  --text-muted: #C8D3E1;
  --text-subtle: #9BA9BE;
  --text-placeholder: #6C7A91;
  --text-inverse: #0F172A;

  --border: rgba(200, 211, 225, 0.12);
  --border-strong: rgba(200, 211, 225, 0.2);
  --border-focus: rgba(66, 153, 225, 0.24);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 1px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.34), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-primary: 0 8px 24px rgba(66, 153, 225, 0.16);
  --shadow-teal: 0 8px 24px rgba(32, 201, 151, 0.14);

  --sidebar-bg: rgba(29, 39, 59, 0.92);
  --sidebar-border: rgba(200, 211, 225, 0.1);
}

body {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}

html[data-theme="dark"] body {
  background: linear-gradient(180deg, #0F172A 0%, #151E31 100%);
}

.login-page::before {
  background:
    radial-gradient(ellipse 72% 56% at 18% 24%, rgba(66, 153, 225, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 56% 52% at 82% 78%, rgba(12, 166, 120, 0.1) 0%, transparent 55%);
  animation: none;
}

::selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

.sidebar,
.topbar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar {
  background: rgba(248, 250, 252, 0.92);
}

html[data-theme="dark"] .topbar {
  background: rgba(15, 23, 42, 0.92);
}

.card,
.calendar-section,
.login-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

.card:hover,
.task-card:hover,
.calendar-section:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card-flat,
.card-flat:hover {
  box-shadow: none;
}

.task-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

.task-card.private {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(12, 166, 120, 0.04) 100%);
  border-color: rgba(12, 166, 120, 0.16);
}

html[data-theme="dark"] .task-card.private {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(32, 201, 151, 0.06) 100%);
}

.logo-mark,
.add-task-btn,
.btn-primary,
.fab,
.login-logo-mark,
.user-avatar,
.nav-badge,
.filter-tab.active,
.theme-toggle input:checked + .theme-track,
.fc-event-task {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn-teal {
  background: var(--color-teal);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.add-task-btn:hover,
.fab:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
  filter: none;
  transform: none;
}

.btn-danger:hover {
  background: var(--color-danger-hover);
  box-shadow: var(--shadow-sm);
  filter: none;
  transform: none;
}

.btn-teal:hover {
  background: var(--color-teal-hover);
  box-shadow: var(--shadow-sm);
  filter: none;
  transform: none;
}

.add-task-btn .plus-icon {
  background: rgba(255, 255, 255, 0.18);
}

.sync-btn {
  background: var(--surface);
  color: var(--color-primary);
  border: 1px solid var(--border);
  box-shadow: none;
}

.sync-btn:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: rgba(0, 84, 166, 0.2);
  box-shadow: none;
  transform: none;
}

.view-toggle {
  background: var(--surface-2);
  border-color: var(--border);
}

.view-btn.active {
  background: var(--surface);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--border);
}

.task-checkbox:checked::after,
.custom-checkbox:checked::after {
  border-color: var(--text-inverse);
}

.theme-track::before,
.theme-toggle input:checked + .theme-track::before {
  background: var(--surface);
}

.badge-active {
  border-color: rgba(0, 84, 166, 0.18);
}

.badge-completed,
.badge-priority-low {
  border-color: rgba(47, 179, 68, 0.2);
}

.badge-private {
  background: var(--color-teal-subtle);
  color: var(--color-teal);
  border-color: rgba(12, 166, 120, 0.2);
}

.badge-calendar {
  border-color: rgba(66, 153, 225, 0.2);
}

.badge-priority-high {
  border-color: rgba(214, 57, 57, 0.2);
}

.badge-priority-medium {
  border-color: rgba(245, 159, 0, 0.2);
}

.progress-fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-coral));
}

.tag-remove {
  background: rgba(0, 84, 166, 0.08);
}

.tag-remove:hover {
  background: var(--color-danger);
  color: var(--text-inverse);
}

.fc .fc-timegrid-col.fc-day-today,
.fc .fc-daygrid-day.fc-day-today {
  background: linear-gradient(180deg, rgba(0, 84, 166, 0.08) 0%, rgba(0, 84, 166, 0.03) 100%);
}

.fc .fc-event {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.fc-event-google {
  background: var(--color-coral);
  color: var(--text-inverse);
}