:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --spacing: .25rem;
  --container-md: 28rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --tracking-tighter: -.05em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --color-bg: #13131a;
  --color-surface: #23232c;
  --color-border: #ffffff0f;
  --color-text-primary: #f4f4f5;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #63636e;
  --color-brand: #ef4444;
  --color-brand-light: #f87171;
  --color-brand-dark: #dc2626;
  --color-success: #10b981;
  --color-white: #ffffff;
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-soft: rgba(35, 35, 44, .42);
  --panel: #16161e;
  --panel-strong: #1b1b24;
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --muted-2: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: rgba(255, 255, 255, .16);
  --red: var(--color-brand);
  --red-dark: var(--color-brand-dark);
  --green: var(--color-success);
  --amber: #f59e0b;
  --blue: var(--color-brand-light);
  --focus: var(--color-brand);
  --white: var(--color-white);
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("/fonts/Inter-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

html {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-primary);
}

html.fonts-pending body {
  opacity: 0;
}
html.fonts-ready body {
  opacity: 1;
}

.brand-logo,
.authex-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.brand-logo:hover,
.authex-logo:hover {
  text-decoration: none;
}
.brand-word,
.authex-logo-word {
  color: var(--color-white);
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  text-transform: lowercase;
}
.brand-word .red,
.brand-word .text-brand,
.authex-logo-word .red,
.authex-logo-word .text-brand {
  color: var(--color-brand);
}
.brand-red-tag,
.authex-logo-tag {
  border: 1px solid rgba(239, 68, 68, .30);
  border-radius: 4px;
  color: var(--color-brand);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .24em;
  line-height: 1;
  padding: 4px 8px;
  text-transform: uppercase;
}

.btn-primary,
.button-primary {
  align-items: center;
  background: var(--color-brand);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  padding: 12px 24px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-primary:hover,
.button-primary:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  text-decoration: none;
}
.btn-secondary,
.button-secondary {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  padding: 12px 24px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-secondary:hover,
.button-secondary:hover {
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
}

.field-label {
  color: var(--color-text-secondary);
  display: block;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .18em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.field-input,
.field-textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font: inherit;
  padding: 12px 16px;
  width: 100%;
}
.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--color-text-muted);
}
.field-input:focus,
.field-textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
  outline: none;
}

.surface-panel {
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}