/* ============================================================
   LIBRETIME UI — Base Variables & Reset
   Dark theme core. Light theme via [data-theme="light"]
   ============================================================ */

:root {
  /* — Core palette — */
  --lt-bg:           #181818;
  --lt-surface:      #1f1f1f;
  --lt-surface-2:    #262626;
  --lt-surface-3:    #2e2e2e;
  --lt-border:       rgba(255,255,255,0.08);
  --lt-border-hover: rgba(255,255,255,0.16);

  /* — Accent — */
  --lt-accent:        #4d8fd1;
  --lt-accent-dim:    rgba(77,143,209,0.12);
  --lt-accent-glow:   rgba(77,143,209,0.25);

  /* — Semantic — */
  --lt-success:       #5cb88a;
  --lt-success-dim:   rgba(92,184,138,0.12);
  --lt-success-border:rgba(92,184,138,0.35);

  --lt-danger:        #e07070;
  --lt-danger-dim:    rgba(224,112,112,0.12);
  --lt-danger-border: rgba(224,112,112,0.35);

  --lt-warning:       #d4a257;
  --lt-warning-dim:   rgba(212,162,87,0.10);

  /* — Text — */
  --lt-text:          #e8e8e8;
  --lt-text-muted:    #888;
  --lt-text-faint:    #555;
  --lt-placeholder:   #4a4a4a;

  /* — Radius & spacing — */
  --lt-radius-sm:   6px;
  --lt-radius:      10px;
  --lt-radius-lg:   14px;
  --lt-radius-xl:   20px;

  /* — Motion — */
  --lt-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --lt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lt-duration:    220ms;
  --lt-duration-fast: 140ms;

  /* — Typography — */
  --lt-font:   'Inter', 'SF Pro Display', system-ui, sans-serif;
  --lt-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* — Shadows — */
  --lt-shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --lt-shadow:     0 4px 20px rgba(0,0,0,0.5);
  --lt-shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
}

/* Light theme override */
[data-theme="light"] {
  --lt-bg:           #f4f4f4;
  --lt-surface:      #ffffff;
  --lt-surface-2:    #f0f0f0;
  --lt-surface-3:    #e8e8e8;
  --lt-border:       rgba(0,0,0,0.09);
  --lt-border-hover: rgba(0,0,0,0.18);
  --lt-text:         #1a1a1a;
  --lt-text-muted:   #666;
  --lt-text-faint:   #aaa;
  --lt-placeholder:  #bbb;
  --lt-accent-dim:   rgba(77,143,209,0.10);
  --lt-shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --lt-shadow:       0 4px 20px rgba(0,0,0,0.12);
  --lt-shadow-lg:    0 8px 40px rgba(0,0,0,0.16);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--lt-font);
  background: var(--lt-bg);
  color: var(--lt-text);
  line-height: 1.6;
  min-height: 100vh;
}

/* — Scrollbar — */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--lt-bg); }
::-webkit-scrollbar-thumb {
  background: var(--lt-surface-3);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--lt-border-hover); }

/* — Selection — */
::selection {
  background: var(--lt-accent-dim);
  color: var(--lt-accent);
}

/* — Focus visible — */
:focus-visible {
  outline: 2px solid var(--lt-accent);
  outline-offset: 2px;
}

/* ============================================================
   LT UTILITY CLASSES
   ============================================================ */

.lt-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lt-grid {
  display: grid;
  gap: 1.5rem;
}

.lt-flex { display: flex; }
.lt-flex-center { display: flex; align-items: center; justify-content: center; }
.lt-gap-sm { gap: 0.5rem; }
.lt-gap { gap: 1rem; }
.lt-gap-lg { gap: 1.5rem; }

/* ============================================================
   LT LABEL
   ============================================================ */

.lt-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-text-muted);
  margin-bottom: 0.5rem;
  transition: color var(--lt-duration) var(--lt-ease);
}

.lt-field:focus-within .lt-label {
  color: var(--lt-accent);
}

/* ============================================================
   LT HELPER TEXT
   ============================================================ */

.lt-hint {
  font-size: 12px;
  color: var(--lt-text-faint);
  margin-top: 0.35rem;
  line-height: 1.4;
}

.lt-hint.error  { color: var(--lt-danger); }
.lt-hint.success { color: var(--lt-success); }

/* ============================================================
   LT FIELD WRAPPER
   ============================================================ */

.lt-field {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0; /* prevent grid/flex overflow */
}

/* ============================================================
   LT SECTION (demo grouping)
   ============================================================ */

.lt-section {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-lg);
  padding: 2rem;
}

.lt-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lt-text-faint);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--lt-border);
}

/* ============================================================
   ANIMATIONS KEYFRAMES (shared)
   ============================================================ */

@keyframes lt-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lt-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lt-slide-down {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.95); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes lt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

@keyframes lt-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}