body {
  font-family: "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
}

:root,
.theme-default {
  --theme-primary-50: #eff6ff;
  --theme-primary-100: #dbeafe;
  --theme-primary-200: #bfdbfe;
  --theme-primary-300: #93c5fd;
  --theme-primary-400: #60a5fa;
  --theme-primary-500: #3b82f6;
  --theme-primary-600: #2563eb;
  --theme-primary-700: #1d4ed8;
  --theme-primary-800: #1e40af;
  --theme-secondary-50: #ecfdf5;
  --theme-secondary-100: #d1fae5;
  --theme-secondary-200: #a7f3d0;
  --theme-secondary-400: #34d399;
  --theme-secondary-500: #10b981;
  --theme-secondary-600: #059669;
  --theme-warning-50: #fffbeb;
  --theme-warning-100: #fef3c7;
  --theme-warning-200: #fde68a;
  --theme-warning-500: #f59e0b;
  --theme-warning-600: #d97706;
  --theme-danger-50: #fff1f2;
  --theme-danger-100: #ffe4e6;
  --theme-danger-200: #fecdd3;
  --theme-danger-500: #f43f5e;
  --theme-danger-600: #e11d48;
  --theme-hero-top: rgba(56, 189, 248, 0.22);
  --theme-page-bottom: rgb(226, 232, 240);
  --theme-page-top: rgb(248, 250, 252);
  --theme-dark: #0f172a;
  --theme-dark-soft: #1e293b;
}

.theme-std {
  --theme-primary-50: #f1f5fa;
  --theme-primary-100: #dde7f1;
  --theme-primary-200: #c4d4e6;
  --theme-primary-300: #97b1cf;
  --theme-primary-400: #6688b1;
  --theme-primary-500: #173f78;
  --theme-primary-600: #16396a;
  --theme-primary-700: #143157;
  --theme-primary-800: #102844;
  --theme-secondary-50: #eef7f5;
  --theme-secondary-100: #d7ece6;
  --theme-secondary-200: #b5ddd3;
  --theme-secondary-400: #5ca894;
  --theme-secondary-500: #3f8a77;
  --theme-secondary-600: #347362;
  --theme-warning-50: #fbf6ef;
  --theme-warning-100: #f5e7d2;
  --theme-warning-200: #ead1aa;
  --theme-warning-500: #b78642;
  --theme-warning-600: #996f34;
  --theme-danger-50: #f8f2f4;
  --theme-danger-100: #f0e2e7;
  --theme-danger-200: #e4c8d1;
  --theme-danger-500: #b85f70;
  --theme-danger-600: #a94f61;
  --theme-hero-top: rgba(23, 63, 120, 0.16);
  --theme-page-bottom: rgb(229, 234, 241);
  --theme-page-top: rgb(248, 250, 252);
  --theme-dark: #143157;
  --theme-dark-soft: #173f78;
}

.theme-sta {
  --theme-primary-50: #eef4ff;
  --theme-primary-100: #dce7fb;
  --theme-primary-200: #bfd3f6;
  --theme-primary-300: #94b4ef;
  --theme-primary-400: #5f8adc;
  --theme-primary-500: #3f67b7;
  --theme-primary-600: #3458a3;
  --theme-primary-700: #2f4b8d;
  --theme-primary-800: #2a4279;
  --theme-secondary-50: #f6fbec;
  --theme-secondary-100: #e9f5cf;
  --theme-secondary-200: #d3e9a7;
  --theme-secondary-400: #9ccc59;
  --theme-secondary-500: #7fb33d;
  --theme-secondary-600: #6b9835;
  --theme-warning-50: #f6fbec;
  --theme-warning-100: #e9f5cf;
  --theme-warning-200: #d3e9a7;
  --theme-warning-500: #7fb33d;
  --theme-warning-600: #6b9835;
  --theme-danger-50: #eef4ff;
  --theme-danger-100: #dce7fb;
  --theme-danger-200: #bfd3f6;
  --theme-danger-500: #3f67b7;
  --theme-danger-600: #3458a3;
  --theme-hero-top: rgba(127, 179, 61, 0.17);
  --theme-page-bottom: rgb(232, 238, 247);
  --theme-page-top: rgb(251, 253, 247);
  --theme-dark: #2f4b8d;
  --theme-dark-soft: #3f67b7;
}

.theme-std,
.theme-sta {
  background-color: var(--theme-page-top);
}

.theme-std .bg-\[radial-gradient\(circle_at_top\,_rgba\(56\,189\,248\,0\.22\)\,_transparent_28\%\)\,linear-gradient\(180deg\,_rgb\(248\,250\,252\)\,_rgb\(226\,232\,240\)\)\],
.theme-sta .bg-\[radial-gradient\(circle_at_top\,_rgba\(56\,189\,248\,0\.22\)\,_transparent_28\%\)\,linear-gradient\(180deg\,_rgb\(248\,250\,252\)\,_rgb\(226\,232\,240\)\)\] {
  background: radial-gradient(circle at top, var(--theme-hero-top), transparent 28%), linear-gradient(180deg, var(--theme-page-top), var(--theme-page-bottom));
}

.theme-std .text-sky-700,
.theme-sta .text-sky-700 {
  color: var(--theme-primary-700) !important;
}

.theme-std .text-sky-800,
.theme-sta .text-sky-800 {
  color: var(--theme-primary-800) !important;
}

.theme-std .text-sky-300,
.theme-sta .text-sky-300,
.theme-std .text-sky-200,
.theme-sta .text-sky-200 {
  color: var(--theme-primary-200) !important;
}

.theme-std .bg-sky-50,
.theme-sta .bg-sky-50 {
  background-color: var(--theme-primary-50) !important;
}

.theme-std .bg-sky-100,
.theme-sta .bg-sky-100 {
  background-color: var(--theme-primary-100) !important;
}

.theme-std .bg-sky-500,
.theme-sta .bg-sky-500 {
  background-color: var(--theme-primary-500) !important;
}

.theme-std .hover\:bg-sky-400:hover,
.theme-sta .hover\:bg-sky-400:hover {
  background-color: var(--theme-primary-400) !important;
}

.theme-std .hover\:bg-sky-50:hover,
.theme-sta .hover\:bg-sky-50:hover {
  background-color: var(--theme-primary-50) !important;
}

.theme-std .hover\:bg-sky-100:hover,
.theme-sta .hover\:bg-sky-100:hover {
  background-color: var(--theme-primary-100) !important;
}

.theme-std .border-sky-200,
.theme-sta .border-sky-200 {
  border-color: var(--theme-primary-200) !important;
}

.theme-std .border-sky-300,
.theme-sta .border-sky-300 {
  border-color: var(--theme-primary-300) !important;
}

.theme-std .border-sky-400\/30,
.theme-sta .border-sky-400\/30 {
  border-color: color-mix(in srgb, var(--theme-primary-400) 30%, transparent) !important;
}

.theme-std .focus\:border-sky-400:focus,
.theme-sta .focus\:border-sky-400:focus {
  border-color: var(--theme-primary-400) !important;
}

.theme-std .text-sky-600,
.theme-sta .text-sky-600 {
  color: var(--theme-primary-600) !important;
}

.theme-std .bg-sky-500\/10,
.theme-sta .bg-sky-500\/10 {
  background-color: color-mix(in srgb, var(--theme-primary-500) 10%, transparent) !important;
}

.theme-std .text-emerald-700,
.theme-sta .text-emerald-700 {
  color: var(--theme-secondary-600) !important;
}

.theme-std .bg-emerald-50,
.theme-sta .bg-emerald-50 {
  background-color: var(--theme-secondary-50) !important;
}

.theme-std .bg-emerald-100,
.theme-sta .bg-emerald-100 {
  background-color: var(--theme-secondary-100) !important;
}

.theme-std .bg-emerald-500,
.theme-sta .bg-emerald-500 {
  background-color: var(--theme-secondary-500) !important;
}

.theme-std .hover\:bg-emerald-400:hover,
.theme-sta .hover\:bg-emerald-400:hover {
  background-color: var(--theme-secondary-400) !important;
}

.theme-std .hover\:bg-emerald-100:hover,
.theme-sta .hover\:bg-emerald-100:hover {
  background-color: var(--theme-secondary-100) !important;
}

.theme-std .hover\:bg-emerald-600:hover,
.theme-sta .hover\:bg-emerald-600:hover {
  background-color: var(--theme-secondary-600) !important;
}

.theme-std .border-emerald-200,
.theme-sta .border-emerald-200 {
  border-color: var(--theme-secondary-200) !important;
}

.theme-std .text-amber-700,
.theme-sta .text-amber-700 {
  color: var(--theme-warning-600) !important;
}

.theme-std .bg-amber-50,
.theme-sta .bg-amber-50 {
  background-color: var(--theme-warning-50) !important;
}

.theme-std .bg-amber-100,
.theme-sta .bg-amber-100 {
  background-color: var(--theme-warning-100) !important;
}

.theme-std .bg-amber-500,
.theme-sta .bg-amber-500 {
  background-color: var(--theme-warning-500) !important;
}

.theme-std .hover\:bg-amber-100:hover,
.theme-sta .hover\:bg-amber-100:hover {
  background-color: var(--theme-warning-100) !important;
}

.theme-std .hover\:bg-amber-400:hover,
.theme-sta .hover\:bg-amber-400:hover {
  background-color: var(--theme-warning-500) !important;
  filter: brightness(1.06);
}

.theme-std .border-amber-200,
.theme-sta .border-amber-200 {
  border-color: var(--theme-warning-200) !important;
}

.theme-std .text-rose-700,
.theme-sta .text-rose-700 {
  color: var(--theme-danger-600) !important;
}

.theme-std .bg-rose-50,
.theme-sta .bg-rose-50 {
  background-color: var(--theme-danger-50) !important;
}

.theme-std .bg-rose-100,
.theme-sta .bg-rose-100 {
  background-color: var(--theme-danger-100) !important;
}

.theme-std .border-rose-200,
.theme-sta .border-rose-200 {
  border-color: var(--theme-danger-200) !important;
}

.theme-std .hover\:bg-rose-100:hover,
.theme-sta .hover\:bg-rose-100:hover {
  background-color: var(--theme-danger-100) !important;
}

.theme-std .hover\:border-rose-300:hover,
.theme-sta .hover\:border-rose-300:hover {
  border-color: var(--theme-danger-200) !important;
}

.theme-std .text-white,
.theme-sta .text-white {
  text-shadow: none;
}

.theme-std .theme-tab-active,
.theme-sta .theme-tab-active {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 20px rgba(15, 23, 42, 0.22);
  color: #ffffff !important;
}

.theme-std .theme-tab-active:hover,
.theme-sta .theme-tab-active:hover {
  background-color: #111827 !important;
}

.theme-std .calendar-shell,
.theme-sta .calendar-shell {
  border-color: color-mix(in srgb, var(--theme-primary-200) 35%, white) !important;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--theme-primary-500) 10%, rgba(15, 23, 42, 0.12));
}

.theme-std .calendar-accent,
.theme-sta .calendar-accent {
  color: var(--theme-primary-700) !important;
}

.theme-std .calendar-dark-btn,
.theme-sta .calendar-dark-btn {
  background-color: var(--theme-dark) !important;
}

.theme-std .calendar-dark-btn:hover,
.theme-sta .calendar-dark-btn:hover {
  background-color: var(--theme-dark-soft) !important;
}