@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

:root {
  color-scheme: light;
  --auth-ink: #172136;
  --auth-muted: #5f6c7f;
  --auth-line: #dfe5ef;
  --auth-accent: #f04d00;
  --auth-accent-text: #b83d00;
  --auth-accent-soft: #fff0e6;
  --auth-bg: #ffffff;
  --auth-field: #ffffff;
  --auth-border: #8591a2;
  --auth-divider: #dfe4eb;
  --auth-icon: #8a94a6;
  --auth-danger: #c93636;
  --auth-success: #238450;
  --auth-success-bg: #edf9f2;
  --auth-elevated: #f4f6f8;
  --auth-focus: #b83d00;
  --auth-error-bg: #fff2ef;
  --auth-disabled: #edf0f4;
  --auth-disabled-ink: #606a79;
  font-family: "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--auth-bg);
  color: var(--auth-ink);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --auth-ink: #f3f3f5;
  --auth-muted: #bebec5;
  --auth-line: #46464c;
  --auth-accent-text: #ff9a62;
  --auth-accent-soft: #463329;
  --auth-bg: #242426;
  --auth-field: #2e2e31;
  --auth-border: #85858f;
  --auth-divider: #48484e;
  --auth-icon: #b6b6bf;
  --auth-danger: #ff968c;
  --auth-success: #74d9a0;
  --auth-success-bg: #273c30;
  --auth-elevated: #38383c;
  --auth-focus: #ff9a62;
  --auth-error-bg: #48302e;
  --auth-disabled: #38383c;
  --auth-disabled-ink: #acacb5;
}

@theme inline {
  --color-ink: var(--auth-ink);
  --color-muted: var(--auth-muted);
  --color-line: var(--auth-line);
  --color-accent: var(--auth-accent);
  --color-accent-text: var(--auth-accent-text);
  --color-accent-soft: var(--auth-accent-soft);
  --color-page: var(--auth-bg);
  --color-field: var(--auth-field);
  --color-control-border: var(--auth-border);
  --color-divider: var(--auth-divider);
  --color-icon: var(--auth-icon);
  --color-danger: var(--auth-danger);
  --color-success: var(--auth-success);
  --color-success-bg: var(--auth-success-bg);
  --color-elevated: var(--auth-elevated);
  --color-focus: var(--auth-focus);
  --color-error-bg: var(--auth-error-bg);
  --color-disabled: var(--auth-disabled);
  --color-disabled-ink: var(--auth-disabled-ink);
  --color-primary: #d44200;
  --color-primary-hover: #be3900;
  --color-primary-pressed: #a83300;
  --font-latin: "Geist Variable", sans-serif;
}

html,
body,
#app {
  min-height: 100%;
}
body {
  margin: 0;
  min-width: 280px;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select,
input[type="checkbox"] {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled),
select:not(:disabled) {
  cursor: pointer;
}
a,
button,
input,
select {
  touch-action: manipulation;
}
@layer base {
  :where(button, a, input, select):focus-visible {
    outline: 2px solid var(--auth-focus);
    outline-offset: 3px;
  }
}
input:disabled {
  -webkit-text-fill-color: var(--auth-disabled-ink);
  opacity: 1;
}
fieldset:disabled {
  color: var(--auth-disabled-ink);
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--auth-field) inset;
  -webkit-text-fill-color: var(--auth-ink);
  caret-color: var(--auth-ink);
}
::selection {
  background: var(--auth-accent-soft);
  color: var(--auth-ink);
}
dialog[open] {
  display: block;
}