@import url("./design-system/tokens/colors_and_type.css");
@import url("./design-system/web/motion.css");

/* Public native theme adapter; the imported Troople tokens remain unchanged. */
:root[data-variant] {
  --motion-hover: 120ms;
  --font-sans: var(--font-family-brand);
  --font-mono: var(--brand-mono);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --secondary: var(--surface);
  --secondary-foreground: var(--foreground);
  --muted-foreground: var(--muted);
  --accent-foreground: var(--primary-foreground);
  --input: var(--input-border);
  --ring: var(--highlight);
  font-family: var(--font-family-brand);
  background: var(--background);
  color: var(--foreground);
}
body {
  margin: 0;
  font-family: var(--font-family-brand);
  font-size: var(--font-size-body);
  line-height: var(--font-line-body);
  background: var(--background);
  color: var(--foreground);
}
button,
input,
select,
textarea {
  font-family: inherit;
}
:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 4px;
}
[data-testid="login-page"] {
  padding: 48px 24px;
}
[data-testid="login-page"] > div {
  max-width: 440px;
}
[data-testid="login-page"] > div::before {
  content: "";
  display: block;
  width: 200px;
  height: 48px;
  margin: 0 0 48px;
  background: url("./design-system/assets/logos/troople-logo.svg") left center /
    contain no-repeat;
}
[data-testid="login-page"] h2 {
  font-weight: 300;
  font-size: clamp(32px, 5vw, 44px);
  line-height: var(--font-line-heading);
  letter-spacing: var(--font-tracking-heading);
  text-align: left;
}
[data-testid="login-page"] h2 + p {
  text-align: left;
  font-size: 16px;
}
[data-testid="login-page"] form {
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: none;
}
[data-testid="login-page"] label {
  font-size: 14px;
}
[data-testid="login-page"] input,
[data-testid="login-page"] button {
  min-height: var(--target-control);
  min-width: 44px;
  border-radius: var(--radius-control);
  font-size: 15px;
}
[data-testid="login-page"] input {
  padding: 10px 12px;
}
:root[data-theme="light"] [data-testid="login-page"] > div::before {
  background-color: var(--brand-black);
  width: 224px;
  height: 64px;
  background-size: 188px auto;
  background-position: 18px center;
  border-radius: var(--radius-control);
}
@media (max-width: 480px) {
  [data-testid="login-page"] {
    padding: 32px 20px;
  }
  [data-testid="login-page"] form {
    padding: 24px 20px;
  }
}