:root {
  --radius-xs: 0.2rem; --radius-sm: 0.3rem; --radius-md: 0.4rem;
  --radius-lg: 0.5rem; --radius-xl: 0.6rem; --radius-2xl: 0.7rem; --radius-3xl: 1.2rem;
}

:root:not([data-theme]),
[data-theme="light"],
[data-theme="auto"] {
  color-scheme: light;

  --color-page-bg: #f1f0f7;
  --color-base-100: #FFFFFF;
  --color-base-200: #F1F5F9;
  --color-base-300: #E2E8F0;
  --color-base-content: #0F172A;

  --color-primary: #2563EB;
  --color-primary-content: #FFFFFF;
  --color-secondary: #64748B;
  --color-secondary-content: #334155;
  --color-accent: #FF5A36;
  --color-accent-content: #FFFFFF;

  --color-success: #16A34A;
  --color-success-content: #FFFFFF;

  --color-warning: #F59E0B;
  --color-warning-content: #0F172A;

  --color-error: #E11D48;
  --color-error-content: #FFFFFF;

  --color-discount: #059669;
  --color-discount-content: #FFFFFF;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-page-bg: #090D16;
  --color-base-100: #0F172A;
  --color-base-200: #1E293B;
  --color-base-300: #334155;
  --color-base-content: #F8FAFC;

  --color-primary: #3B82F6;
  --color-primary-content: #FFFFFF;
  --color-secondary: #94A3B8;
  --color-secondary-content: #CBD5E1;
  --color-accent: #FF7253;
  --color-accent-content: #090D16;

  --color-success: #22C55E;
  --color-success-content: #090D16;

  --color-warning: #FBBF24;
  --color-warning-content: #090D16;

  --color-error: #FB7185;
  --color-error-content: #090D16;

  --color-discount: #10B981;
  --color-discount-content: #090D16;
}

.bg-base-100 {
  background-color: var(--color-base-100);
}
.bg-base-200 {
  background-color: var(--color-base-200);
}
.bg-base-300 {
  background-color: var(--color-base-300);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-base-content);
}

:root {
  --radius-xs: 0.2rem;
  --radius-sm: 0.3rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.6rem;
  --radius-2xl: 0.7rem;
  --radius-3xl: 1.2rem;
}

.app-card {
  background-color: var(--color-base-100);
  border-radius: var(--radius-3xl);
  padding: 1.5rem;
}

.app-card-interactive {
  cursor: pointer;
  transition: all 100ms ease;
}

.app-card-interactive:hover {
  border-color: var(--color-primary);
}

.app-card-interactive:active {
  transform: scale(0.99);
}

.app-card-banner {
  padding: 2rem 1.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .app-card-banner {
    padding: 2.5rem 3rem;
  }
  .app-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
    gap: 4rem;
  }
}

.app-container {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}


.text-secondary {
  color: var(--color-secondary-content);
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 1.1em 1.1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }