@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --dentai-blue: #2563eb;
  --dentai-blue-700: #1d4ed8;
  --dentai-blue-50: #eff6ff;
  --dentai-ink: #0f172a;
  --dentai-muted: #64748b;
  --dentai-line: #e9eef5;
  --dentai-bg: #eef2f9;
  --dentai-card: #ffffff;
  --dentai-radius: 22px;
  --dentai-radius-sm: 16px;
  --dentai-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --dentai-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
}

body,
.unfold-body,
button,
input,
select,
textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, #e3ecff 0%, rgba(227, 236, 255, 0) 60%),
    radial-gradient(1000px 500px at -10% 110%, #e7fbf4 0%, rgba(231, 251, 244, 0) 55%),
    var(--dentai-bg);
}

.dark body {
  background: rgb(var(--color-base-950));
}

#content h1,
#content h2,
#content h3,
.unfold-body h1,
.unfold-body h2,
.unfold-body h3 {
  letter-spacing: -.01em;
  font-weight: 700;
}

#content .bg-white,
#content .rounded-default,
#content .border-base-200 {
  border-radius: var(--dentai-radius-sm);
}

#content > div > .bg-white,
#content form > div > .bg-white,
.unfold-card,
fieldset.module {
  border-radius: var(--dentai-radius);
  box-shadow: var(--dentai-shadow-sm);
  border-color: var(--dentai-line);
}

.dark #content > div > .bg-white,
.dark fieldset.module {
  border-color: rgb(var(--color-base-800));
  box-shadow: none;
}

#content table {
  border-radius: var(--dentai-radius-sm);
  overflow: hidden;
}

#content thead th {
  font-weight: 600;
  letter-spacing: .01em;
}

button,
input[type="submit"],
.button,
a.button {
  border-radius: 999px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--dentai-radius-sm);
  border-color: var(--dentai-line);
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark select,
.dark textarea {
  border-color: rgb(var(--color-base-800));
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--dentai-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.unfold-login-container,
.unfold-login-container form,
.unfold-login-container > div {
  border-radius: var(--dentai-radius);
}

#nav-sidebar a,
.unfold-sidebar a {
  border-radius: var(--dentai-radius-sm);
}