/* Minimal Lexi theme for server-rendered/static HTML pages.
   Keep aligned with lexi-ai-client/src/index.css design tokens. */

:root {
  --lexi-font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lexi-font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --lexi-primary: #6b8f6e;
  --lexi-primary-hover: #587a5b;
  --lexi-primary-muted: #d4e2d4;
  --lexi-primary-foreground: #ffffff;

  --lexi-surface: #f5f7f4;
  --lexi-surface-elevated: #ffffff;
  --lexi-surface-overlay: #eaefe8;

  --lexi-text: #2e3b2f;
  --lexi-text-muted: #5a6e5c;
  --lexi-text-faint: #8fa48f;

  --lexi-border: #e4eae1;
  --lexi-border-subtle: #dce4d9;

  --lexi-success: #6b8f6e;
  --lexi-danger: #dc2626;

  --lexi-shadow-sm: 0 1px 2px rgba(46, 59, 47, 0.06);
  --lexi-shadow-md: 0 10px 30px rgba(46, 59, 47, 0.08), 0 2px 6px rgba(46, 59, 47, 0.06);

  --lexi-radius-md: 12px;
  --lexi-radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--lexi-font-body);
  background: var(--lexi-surface);
  color: var(--lexi-text);
}

.lexi-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lexi-card {
  width: 100%;
  max-width: 460px;
  background: var(--lexi-surface-elevated);
  border: 1px solid var(--lexi-border);
  border-radius: var(--lexi-radius-md);
  box-shadow: var(--lexi-shadow-sm);
  padding: 2.25rem;
  text-align: center;
}

.lexi-title {
  margin: 0 0 0.75rem 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--lexi-text);
}

.lexi-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lexi-text-muted);
}

.lexi-text + .lexi-text {
  margin-top: 0.5rem;
}

.lexi-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--lexi-primary-foreground);
  box-shadow: var(--lexi-shadow-sm);
}

.lexi-icon--neutral {
  background: var(--lexi-text);
}

.lexi-icon--success {
  background: var(--lexi-success);
}

.lexi-icon--danger {
  background: var(--lexi-danger);
}

.lexi-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--lexi-radius-sm);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease,
    box-shadow 0.2s ease;
  user-select: none;
}

.lexi-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lexi-btn--primary {
  background: var(--lexi-primary);
  color: var(--lexi-primary-foreground);
  box-shadow: var(--lexi-shadow-sm);
}

.lexi-btn--primary:hover:not(:disabled) {
  background: var(--lexi-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--lexi-shadow-md);
}

.lexi-btn--primary:active:not(:disabled) {
  transform: translateY(0);
}

.lexi-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}