:root {
  /* Mensthetic Brand Colors */
  --menst-ink: #0B0E11;
  --menst-slate: #1E242B;
  --menst-graphite: #2C333B;
  --menst-steel: #4A5562;
  --menst-silver: #A7B0BA;
  --menst-cloud: #E6EBF0;
  --menst-paper: #F7F9FB;
  --menst-accent: #0E6BFF;
  --menst-accent-2: #00C2A8;
  --menst-danger: #D92D20;
  --menst-warning: #F59E0B;
  --menst-success: #16A34A;

  /* Radius */
  --menst-r-sm: 8px;
  --menst-r-md: 12px;
  --menst-r-lg: 20px;

  /* Spacing */
  --menst-s-2: 8px;
  --menst-s-3: 12px;
  --menst-s-4: 16px;
  --menst-s-6: 24px;
  --menst-s-8: 32px;
  --menst-s-12: 48px;
  --menst-s-16: 64px;
  --menst-s-20: 80px;

  /* Shadows */
  --menst-shadow-1: 0 2px 8px rgba(11, 14, 17, 0.08);
  --menst-shadow-2: 0 8px 24px rgba(11, 14, 17, 0.10);

  /* Motion */
  --menst-motion-fast: 200ms ease;
  --menst-motion: 300ms ease;
  --menst-motion-slow: 500ms ease;
}

/* Mensthetic Component Classes */
.btn--menst-primary {
  background: var(--menst-accent);
  color: #fff;
  border-radius: var(--menst-r-lg);
  padding: var(--menst-s-3) var(--menst-s-6);
  border: none;
  min-height: 44px;
  min-width: 44px;
  font-weight: 600;
  transition: all var(--menst-motion);
  cursor: pointer;
}

.btn--menst-primary:hover {
  background: #0A5CE8;
  transform: translateY(-1px);
}

.btn--menst-primary:focus-visible {
  outline: 2px solid var(--menst-accent);
  outline-offset: 2px;
}

.btn--menst-quiet {
  background: transparent;
  color: var(--menst-accent);
  border: 1px solid var(--menst-accent);
  border-radius: var(--menst-r-lg);
  padding: var(--menst-s-3) var(--menst-s-6);
  min-height: 44px;
  min-width: 44px;
  font-weight: 600;
  transition: all var(--menst-motion);
  cursor: pointer;
}

.btn--menst-quiet:hover {
  background: var(--menst-accent);
  color: #fff;
}

.btn--menst-quiet:focus-visible {
  outline: 2px solid var(--menst-accent);
  outline-offset: 2px;
}

.card--menst {
  background: #fff;
  border-radius: var(--menst-r-lg);
  box-shadow: var(--menst-shadow-1);
  padding: var(--menst-s-6);
  transition: box-shadow var(--menst-motion);
}

.card--menst:hover {
  box-shadow: var(--menst-shadow-2);
}

.chip--menst {
  background: var(--menst-cloud);
  color: var(--menst-steel);
  border: 1px solid var(--menst-silver);
  border-radius: 9999px;
  padding: var(--menst-s-2) var(--menst-s-4);
  font-size: 14px;
  font-weight: 500;
}

.input--menst {
  border: 1px solid var(--menst-silver);
  border-radius: var(--menst-r-md);
  padding: var(--menst-s-3) var(--menst-s-4);
  background: #fff;
  color: var(--menst-ink);
  min-height: 44px;
  transition: border-color var(--menst-motion);
}

.input--menst:focus {
  border-color: var(--menst-accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--menst-accent);
}