/* ==========================================================================
   Auth pages — based on Bookboost Design System tokens and components
   ========================================================================== */

/* ==========================================================================
   1. DESIGN SYSTEM TOKENS
   ========================================================================== */

:root {
  --ds-white: #ffffff;

  --ds-gray-25: #fcfcfc;
  --ds-gray-50: #fafafa;
  --ds-gray-100: #f5f5f5;
  --ds-gray-200: #e5e5e5;
  --ds-gray-300: #d6d6d6;
  --ds-gray-400: #a3a3a3;
  --ds-gray-500: #737373;
  --ds-gray-600: #525252;
  --ds-gray-700: #424242;
  --ds-gray-800: #292929;
  --ds-gray-900: #141414;

  --ds-error-50: #fef3f2;
  --ds-error-300: #fda29b;
  --ds-error-400: #f97066;
  --ds-error-600: #d92d20;

  --ds-secondary-400: #aa77ed;

  --ds-text-high: var(--ds-gray-900);
  --ds-text-default: var(--ds-gray-800);
  --ds-text-subtle: var(--ds-gray-500);
  --ds-text-disabled: var(--ds-gray-300);
  --ds-text-error: var(--ds-error-600);

  --ds-border-default: var(--ds-gray-200);
  --ds-border-error: var(--ds-error-300);

  --ds-bg-base: var(--ds-white);
  --ds-bg-sunken: var(--ds-gray-50);
  --ds-bg-raised: var(--ds-gray-100);

  --ds-effect-focused: var(--ds-secondary-400);

  --ds-font-family:
    'Roboto', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --ds-heading-sm-size: 24px;
  --ds-heading-sm-line-height: 32px;

  --ds-text-md-size: 16px;
  --ds-text-md-line-height: 24px;
  --ds-text-sm-size: 14px;
  --ds-text-sm-line-height: 20px;
  --ds-text-xs-size: 12px;
  --ds-text-xs-line-height: 18px;

  --ds-font-bold: 700;
  --ds-font-semibold: 600;
  --ds-font-medium: 500;
  --ds-font-regular: 400;

  --ds-shadow-xs: 0px 1px 2px 0px rgba(20, 20, 20, 0.05);
  --ds-shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
  --ds-shadow-lg:
    0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);

  --ds-space-xs: 4px;
  --ds-space-sm: 6px;
  --ds-space-md: 8px;
  --ds-space-lg: 12px;
  --ds-space-xl: 16px;
  --ds-space-2xl: 20px;
  --ds-space-3xl: 24px;
  --ds-space-4xl: 32px;
  --ds-space-5xl: 40px;
  --ds-space-6xl: 48px;

  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;

  --ds-border-width-default: 1px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

body {
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-sm-size);
  line-height: var(--ds-text-sm-line-height);
  color: var(--ds-text-default);
  background-color: var(--ds-bg-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. AUTH LAYOUT
   ========================================================================== */

.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--ds-space-3xl);
  padding-top: max(var(--ds-space-3xl), 33.3vh - 150px);
}

.auth-card {
  width: 100%;
  max-width: 320px;
  background: var(--ds-bg-base);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-4xl) var(--ds-space-3xl);
}

/* Logo + title */
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-3xl);
  margin-bottom: var(--ds-space-5xl);
}

.auth-logo {
  width: 48px;
  height: 48px;
}

.auth-title {
  font-size: var(--ds-heading-sm-size);
  line-height: var(--ds-heading-sm-line-height);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-high);
  text-align: center;
}

.auth-subtitle {
  font-size: var(--ds-text-sm-size);
  line-height: var(--ds-text-sm-line-height);
  color: var(--ds-text-subtle);
  text-align: center;
  margin-top: var(--ds-space-md);
}

/* ==========================================================================
   4. FORM ELEMENTS (ds-input)
   ========================================================================== */

.auth-field {
  margin-bottom: var(--ds-space-3xl);
}

.ds-input-label {
  display: block;
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-sm-size);
  font-weight: var(--ds-font-medium);
  line-height: var(--ds-text-sm-line-height);
  color: var(--ds-text-subtle);
  margin-bottom: var(--ds-space-sm);
}

.ds-input {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  height: 40px;
  padding: var(--ds-space-md);
  background-color: var(--ds-bg-base);
  border: var(--ds-border-width-default) solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
  overflow: clip;
}

.ds-input > input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-sm-size);
  font-weight: var(--ds-font-regular);
  line-height: var(--ds-text-sm-line-height);
  color: var(--ds-text-default);
  outline: none;
}

.ds-input > input::placeholder {
  color: var(--ds-text-subtle);
}

.ds-input:focus-within {
  outline: 2px solid var(--ds-effect-focused);
  outline-offset: 2px;
}

.ds-input.is-invalid {
  border-color: var(--ds-border-error);
}

.ds-input.is-invalid:focus-within {
  outline-color: var(--ds-error-400);
}

/* Readonly / disabled input */
.ds-input:has(input[readonly]),
.ds-input:has(input:disabled) {
  background-color: var(--ds-bg-sunken);
}

.ds-input > input[readonly],
.ds-input > input:disabled {
  color: var(--ds-text-subtle);
  cursor: default;
}

/* Hint / error text */
.ds-input-hint {
  display: block;
  font-family: var(--ds-font-family);
  font-size: var(--ds-text-sm-size);
  font-weight: var(--ds-font-regular);
  line-height: var(--ds-text-sm-line-height);
  color: var(--ds-text-subtle);
  margin-top: var(--ds-space-sm);
}

.ds-input-hint.is-error {
  color: var(--ds-text-error);
}

/* ==========================================================================
   5. BUTTON (ds-button)
   ========================================================================== */

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-xs);
  font-family: var(--ds-font-family);
  font-weight: var(--ds-font-medium);
  cursor: pointer;
  appearance: none;
  text-decoration: none;
  white-space: nowrap;
  border: var(--ds-border-width-default) solid transparent;
}

.ds-button:focus-visible {
  outline: 2px solid var(--ds-effect-focused);
  outline-offset: 2px;
}

.ds-button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.ds-button.is-primary {
  width: 100%;
  height: 40px;
  padding: var(--ds-space-md) var(--ds-space-lg);
  font-size: var(--ds-text-sm-size);
  line-height: var(--ds-text-sm-line-height);
  color: var(--ds-gray-25);
  background-color: var(--ds-gray-800);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
}

.ds-button.is-primary:hover {
  background-color: var(--ds-gray-900);
}

.ds-button.is-primary:disabled {
  background-color: var(--ds-gray-200);
}

/* ==========================================================================
   6. LINKS
   ========================================================================== */

.auth-link {
  font-size: var(--ds-text-sm-size);
  line-height: var(--ds-text-sm-line-height);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-subtle);
  text-decoration: none;
  border-radius: var(--ds-radius-md);
}

.auth-link:hover {
  color: var(--ds-text-default);
}

.auth-link:focus-visible {
  outline: 2px solid var(--ds-effect-focused);
  outline-offset: 2px;
}

/* ==========================================================================
   7. FOOTER & MISC
   ========================================================================== */

.auth-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--ds-space-4xl);
}

.auth-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-3xl);
}

.auth-identity-email {
  font-size: var(--ds-text-sm-size);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-high);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.auth-identity-reset {
  font-size: var(--ds-text-xs-size);
  line-height: var(--ds-text-xs-line-height);
  font-weight: var(--ds-font-medium);
  color: var(--ds-text-subtle);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: var(--ds-space-md);
  border-radius: var(--ds-radius-md);
}

.auth-identity-reset:hover {
  color: var(--ds-text-default);
}

.auth-identity-reset:focus-visible {
  outline: 2px solid var(--ds-effect-focused);
  outline-offset: 2px;
}

/* Flash messages */
.auth-alert {
  padding: var(--ds-space-lg) var(--ds-space-xl);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-text-sm-size);
  line-height: var(--ds-text-sm-line-height);
  margin-bottom: var(--ds-space-3xl);
}

.auth-alert.is-success {
  background-color: #f5fbee;
  color: #3f621a;
  border: 1px solid #ceeab0;
}

.auth-alert.is-error {
  background-color: var(--ds-error-50);
  color: var(--ds-error-600);
  border: 1px solid var(--ds-error-300);
}

/* Visually hidden but accessible to password managers and screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}