163952e
@import "@fontsource-variable/noto-sans-sc";
@import "@fontsource-variable/geist";
@import "tailwindcss";
@source "../../";
@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;
}