:root {
  --color-white: #fff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-400: #a1a1a1;
  --color-neutral-500: #737373;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  --color-red-400: #ff6467;
  --color-red-600: #e7000b;

  --background: var(--color-white);
  --foreground: var(--color-neutral-950);
  --primary: var(--color-neutral-900);
  --primary-foreground: var(--color-neutral-50);
  --muted: var(--color-neutral-100);
  --muted-foreground: var(--color-neutral-500);
  --accent: var(--color-neutral-100);
  --destructive: var(--color-red-600);
  --border: var(--color-neutral-200);
  --input: var(--color-neutral-200);
  --ring: var(--color-neutral-400);

  --interface-foreground-default-primary: var(--foreground);
  --interface-foreground-default-secondary: var(--foreground);
  --interface-foreground-validation-danger: var(--destructive);
  --interface-border-validation-danger: var(--destructive);

  --input-background-default: var(--background);
  --input-background-hover: var(--accent);
  --input-background-disabled: var(--muted);
  --input-border-default: var(--input);
  --input-border-hover: var(--input);
  --input-border-focus: var(--ring);
  --input-border-disabled: var(--border);
  --input-foreground-primary: var(--foreground);
  --input-foreground-tertiary: var(--muted-foreground);
  --input-foreground-disabled: var(--muted-foreground);

  --button-primary-background-default: var(--primary);
  --button-primary-background-hover: #171717e6;
  --button-primary-background-disabled: var(--muted);
  --button-primary-foreground-default: var(--primary-foreground);
  --button-primary-foreground-disabled: var(--muted-foreground);

  --checkbox-background-default: var(--muted);
  --checkbox-background-checked: var(--primary);
  --checkbox-border-default: var(--input);
  --checkbox-border-checked: var(--ring);
  --checkbox-foreground-checked: var(--primary-foreground);

  --button-link-brand-brand: var(--primary);
  --button-link-brand-brand-hover: var(--foreground);

  --radius-forms: 0.25rem;
  --radius-buttons: 0.25rem;

  --page-background: var(--background);
  --logo-foreground: var(--foreground);

  --font-sans: Inter, Helvetica, Arial, sans-serif;
  --control-height: 2.25rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-50);
    --primary: var(--color-neutral-200);
    --button-primary-background-hover: #e5e5e5e6;
    --primary-foreground: var(--color-neutral-900);
    --muted: var(--color-neutral-800);
    --muted-foreground: var(--color-neutral-400);
    --accent: var(--color-neutral-700);
    --destructive: var(--color-red-400);
    --border: #ffffff1a;
    --input: #ffffff26;
    --ring: var(--color-neutral-500);

    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--interface-foreground-default-primary);
}

h1,
p {
  margin: 0;
}

.page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

.column {
  display: grid;
  gap: 2rem;
  width: min(512px, 100%);
  padding: 2.5rem 2rem;
}

@media (min-width: 768px) {
  .column {
    padding: 3rem;
  }
}

@media (min-width: 1024px) {
  .column {
    padding: 4rem;
  }
}

.header {
  display: grid;
  gap: 2.5rem;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 2.25rem;
}

.lockup-ory {
  height: 1.5rem;
  fill: var(--logo-foreground);
}

.lockup-slash {
  height: 1.5rem;
  width: auto;
  color: var(--logo-foreground);
}

.lockup-slack {
  height: 1.875rem;
  width: auto;
  color: var(--logo-foreground);
}

.header-text {
  display: grid;
  gap: 0.5rem;
}

.header-text h1 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--interface-foreground-default-primary);
}

.header-text p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--interface-foreground-default-secondary);
}

.form {
  display: grid;
  gap: 1.75rem;
}

.fields {
  display: grid;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--input-foreground-primary);
}

.input {
  width: 100%;
  height: var(--control-height);
  padding: 0 0.75rem;
  border: 1px solid var(--input-border-default);
  border-radius: var(--radius-forms);
  background: var(--input-background-default);
  color: var(--input-foreground-primary);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  transition: border-color 100ms linear, background-color 100ms linear;
}

.input::placeholder {
  color: var(--input-foreground-tertiary);
  opacity: 1;
}

.input:hover {
  border-color: var(--input-border-hover);
  background: var(--input-background-hover);
}

.input:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
}

.input:disabled {
  border-color: var(--input-border-disabled);
  background: var(--input-background-disabled);
  color: var(--input-foreground-disabled);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--interface-foreground-default-primary);
}

.checkbox-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.25rem;
}

.checkbox-box input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--checkbox-border-default);
  border-radius: var(--radius-forms);
  background: var(--checkbox-background-default);
  cursor: pointer;
}

.checkbox-box input:checked {
  border-color: var(--checkbox-border-checked);
  background: var(--checkbox-background-checked);
}

.checkbox-box input:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: 2px;
}

.checkbox-box input[aria-invalid="true"] {
  border-color: var(--interface-border-validation-danger);
}

.checkbox-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.checkbox-field .field-message {
  padding-left: 1.75rem;
}

.checkbox-box svg {
  position: absolute;
  display: none;
  width: 1rem;
  height: 1rem;
  fill: var(--checkbox-foreground-checked);
  pointer-events: none;
}

.checkbox-box input:checked + svg {
  display: block;
}

.link {
  color: var(--button-link-brand-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 100ms linear;
}

.link:hover {
  color: var(--button-link-brand-brand-hover);
}

.link:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--control-height);
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-buttons);
  background: var(--button-primary-background-default);
  color: var(--button-primary-foreground-default);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear;
}

.button:hover {
  background: var(--button-primary-background-hover);
}

.button:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: 2px;
}

.button:disabled {
  background: var(--button-primary-background-disabled);
  color: var(--button-primary-foreground-disabled);
  cursor: not-allowed;
}

.button[aria-busy="true"] {
  background: var(--button-primary-background-default);
  color: var(--button-primary-foreground-default);
  cursor: wait;
}

.button[aria-busy="true"] .button-label {
  opacity: 0.2;
}

.spinner {
  position: absolute;
  inset: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
  stroke: currentColor;
  stroke-width: 2;
  animation: spin 1s linear infinite;
}

.spinner[hidden] {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.field-message {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--interface-foreground-validation-danger);
}


.status {
  font-size: 0.875rem;
  line-height: 1.5;
}

.field-message:empty,
.status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.status[data-state="error"] {
  color: var(--interface-foreground-validation-danger);
}

.status[data-state="success"] {
  color: var(--interface-foreground-default-primary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}