@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* LoginHub — shared light / dark theme tokens */
:root,
[data-theme="light"] {
  color-scheme: light;
  --lh-bg: #ffffff;
  --lh-surface: #f5f5f5;
  --lh-surface-2: #ebebeb;
  --lh-border: #000000;
  --lh-border-soft: #d4d4d4;
  --lh-text: #000000;
  --lh-muted: #666666;
  --lh-accent: #000000;
  --lh-accent-fg: #ffffff;
  --lh-success-bg: #f0fdf4;
  --lh-success-border: #000000;
  --lh-error-bg: #fff5f5;
  --lh-shadow: 4px 4px 0 #000000;
  --lh-drop-hover: #eeeeee;
  --lh-code: #222222;
  --lh-radius: 16px;
  --lh-radius-sm: 10px;
  --lh-font: 'Montserrat', system-ui, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --lh-bg: #0a0a0a;
  --lh-surface: #141414;
  --lh-surface-2: #1c1c1c;
  --lh-border: #ffffff;
  --lh-border-soft: #2a2a2a;
  --lh-text: #ffffff;
  --lh-muted: #888888;
  --lh-accent: #ffffff;
  --lh-accent-fg: #0a0a0a;
  --lh-success-bg: #0f1a0f;
  --lh-success-border: #ffffff;
  --lh-error-bg: #1a0f0f;
  --lh-shadow: 4px 4px 0 rgba(255, 255, 255, 0.15);
  --lh-drop-hover: #1a1a1a;
  --lh-code: #e0e0e0;
}

html {
  background: var(--lh-bg);
}

* {
  box-sizing: border-box;
}

body.lh-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--lh-font);
  background: var(--lh-bg);
  color: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}

.lh-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.lh-hidden {
  display: none !important;
}

/* Theme toggle */
.lh-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid var(--lh-border-soft);
  border-radius: var(--lh-radius-sm);
  background: var(--lh-surface);
  color: var(--lh-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.lh-theme-toggle:hover {
  border-color: var(--lh-border);
  transform: translateY(-1px);
}

.lh-theme-icon {
  display: none;
  line-height: 0;
}

[data-theme="light"] .lh-theme-icon-moon,
[data-theme="dark"] .lh-theme-icon-sun,
:root:not([data-theme]) .lh-theme-icon-sun {
  display: block;
}

[data-theme="light"] .lh-theme-icon-sun {
  display: none;
}

html:not([data-theme]) .lh-theme-icon-moon {
  display: none;
}